diff --git a/README.md b/README.md
index bc5cad4..89aac12 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,8 @@ npm install
 cp .env.example .env
 # .env bearbeiten (siehe Konfiguration unten)
 
+npm run astro build
+
 # Development Server starten
 npm run dev
 ```
@@ -125,6 +127,7 @@ sudo npm install
 
 # Production-Build erstellen
 sudo npm run build
+npm run astro build
 
 # Berechtigungen setzen
 sudo chown -R www-data:www-data /opt/forensic-pathways
diff --git a/src/components/AIQueryInterface.astro b/src/components/AIQueryInterface.astro
index 66e0412..eeb613d 100644
--- a/src/components/AIQueryInterface.astro
+++ b/src/components/AIQueryInterface.astro
@@ -8,9 +8,9 @@ const phases = data.phases;
 const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
 ---
 
-<section id="ai-interface" class="ai-interface" style="display: none;">
+<section id="ai-interface" class="ai-interface hidden">
   <div class="ai-query-section">
-    <div style="text-align: center; margin-bottom: 2rem;">
+    <div class="content-center-lg">
       <h2 style="margin-bottom: 1rem; color: var(--color-primary);">
         <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
           <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
@@ -27,7 +27,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
   <div class="ai-input-container" style="max-width: 1000px; margin: 0 auto;">
     <div class="ai-mode-toggle" style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border);">
       <span id="workflow-label" class="toggle-label active" style="font-weight: 500; color: var(--color-primary); cursor: pointer; transition: var(--transition-fast);">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
           <polyline points="9,11 12,14 22,4"/>
           <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
         </svg>
@@ -39,7 +39,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
       </div>
       
       <span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-fast);">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
           <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
         </svg>
         Spezifische Software oder Methode
@@ -78,19 +78,19 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
             </div>
           </div>
         </div>
-        <div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
+        <div id="smart-prompting-container" class="smart-prompting-container hidden">
           <div class="prompting-card">
             <div id="prompting-status" class="prompting-status">
               <div class="status-icon">💡</div>
               <span class="status-text">Analysiere Eingabe...</span>
-              <div id="prompting-spinner" class="prompting-spinner" style="display: none;">
+              <div id="prompting-spinner" class="prompting-spinner hidden">
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
                   <path d="M21 12a9 9 0 11-6.219-8.56"/>
                 </svg>
               </div>
             </div>
             
-            <div id="suggested-questions" class="suggested-questions" style="display: none;">
+            <div id="suggested-questions" class="suggested-questions hidden">
               <div class="suggestions-header">
                 <span class="suggestions-label">Zur besseren Analyse:</span>
               </div>
@@ -139,9 +139,9 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
         <path d="M12 17h.01"/>
       </svg>
     </div>
-    <p id="loading-text" style="color: var(--color-text-secondary);">Analysiere Szenario und generiere Empfehlungen...</p>
+    <p id="loading-text" class="text-secondary">Analysiere Szenario und generiere Empfehlungen...</p>
     
-    <div id="queue-status" class="queue-status-card" style="display: none;">
+    <div id="queue-status" class="queue-status-card hidden">
       <div class="queue-header">
         <div class="queue-position-display">
           <div id="queue-position-badge" class="position-badge">1</div>
@@ -180,7 +180,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
     </div>
   </div>
 <br>
-  <div id="ai-results" class="ai-results" style="display: none;">
+  <div id="ai-results" class="ai-results hidden">
   </div>
 </section>
 
@@ -812,7 +812,7 @@ document.addEventListener('DOMContentLoaded', () => {
       <div class="tool-results-container">
         <div style="text-align: center; margin-bottom: 2rem; padding: 1.5rem; background: linear-gradient(135deg, var(--color-primary) 0%, #525252 100%); color: white; border-radius: 0.75rem;">
           <h3 style="margin: 0 0 0.75rem 0; font-size: 1.5rem;">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
               <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
             </svg>
             Passende Empfehlungen
@@ -887,7 +887,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 </div>
                 <div class="tool-detailed-explanation" style="margin-bottom: 1.5rem;">
                   <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-accent); font-size: 1rem;">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
                       <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
                       <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
                     </svg>
@@ -896,7 +896,7 @@ document.addEventListener('DOMContentLoaded', () => {
                   ${formatWorkflowSuggestion(toolRec.detailed_explanation)}                  
                   ${toolRec.implementation_approach ? `
                     <h4 style="margin: 0.8rem 0 0.75rem 0; color: var(--color-primary); font-size: 1rem;">
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2 align-middle">
                         <polyline points="9,11 12,14 22,4"/>
                         <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                       </svg>
diff --git a/src/components/ToolFilters.astro b/src/components/ToolFilters.astro
index 052e818..90f9a0e 100644
--- a/src/components/ToolFilters.astro
+++ b/src/components/ToolFilters.astro
@@ -65,7 +65,7 @@ const sortedTags = Object.entries(tagFrequency)
       <label for="include-proprietary">Proprietäre Software mit einschließen</label>
     </div>
     
-    <div style="margin-bottom: 1rem;">
+    <div class="mb-4">
       <div class="tag-header">
         <label style="font-weight: 500;">
           Nach Tags filtern
@@ -95,8 +95,8 @@ const sortedTags = Object.entries(tagFrequency)
   </div>
   
   <div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center;">
-    <button class="btn btn-secondary view-toggle active" style="height:50px" data-view="grid">Kachelansicht</button>
-    <button class="btn btn-secondary view-toggle" style="height:50px" data-view="matrix">Matrix-Ansicht</button>
+    <button class="btn btn-secondary view-toggle active h-12" data-view="grid">Kachelansicht</button>
+    <button class="btn btn-secondary view-toggle h-12" data-view="matrix">Matrix-Ansicht</button>
     
     <button 
       id="ai-view-toggle" 
diff --git a/src/components/ToolMatrix.astro b/src/components/ToolMatrix.astro
index f371d52..c03761a 100644
--- a/src/components/ToolMatrix.astro
+++ b/src/components/ToolMatrix.astro
@@ -29,7 +29,7 @@ domains.forEach((domain: any) => {
 });
 ---
 
-<div id="matrix-container" class="matrix-wrapper" style="display: none;">
+<div id="matrix-container" class="matrix-wrapper hidden">
   {domainAgnosticTools.map((sectionData: any, index: number) => (
     <div id={`domain-agnostic-section-${sectionData.section.id}`} class="card collaboration-section-collapsed mb-6 border-l-4" style="border-left-color: var(--color-accent);">
       <div class="collaboration-header cursor-pointer flex items-center gap-3" onclick={`toggleDomainAgnosticSection('${sectionData.section.id}')`} style="margin-bottom: 0.1rem;">
@@ -39,7 +39,7 @@ domains.forEach((domain: any) => {
           <line x1="20" y1="8" x2="20" y2="14"/>
           <line x1="23" y1="11" x2="17" y2="11"/>
         </svg>
-        <h3 class="m-0 text-lg" style="color: var(--color-accent);">
+        <h3 class="m-0 text-lg text-accent">
           {sectionData.section.name}
           <span id={`count-${sectionData.section.id}`} class="badge text-xs" style="background-color: var(--color-text-secondary); color: var(--color-bg); margin-left: 0.5rem;">
             {sectionData.tools.length}
@@ -51,7 +51,7 @@ domains.forEach((domain: any) => {
           </svg>
         </div>
       </div>
-      <div class="collaboration-content" style="display: none;">
+      <div class="collaboration-content hidden">
         <div class="collaboration-tools-compact" id={`domain-agnostic-tools-${sectionData.section.id}`}>
           {sectionData.tools.map((tool: any) => {
             const hasValidProjectUrl = tool.projectUrl !== undefined &&
@@ -74,7 +74,7 @@ domains.forEach((domain: any) => {
                 <p class="text-muted">              
                   {tool.description}
                 </p>
-                <div class="flex gap-3 text-xs" style="color: var(--color-text-secondary);">
+                <div class="flex gap-3 text-xs text-secondary">
                   <span>{tool.platforms.join(', ')}</span>
                   <span>•</span>
                   <span>{tool.skillLevel}</span>
@@ -140,9 +140,9 @@ domains.forEach((domain: any) => {
   <div class="flex justify-between items-start mb-4">
     <h2 id="tool-name-primary" class="m-0">Tool Name</h2>
     <div class="flex items-center gap-2">
-      <div id="share-button-primary" style="display: none;">
+      <div id="share-button-primary" class="hidden">
       </div>
-      <div id="contribute-button-primary" style="display: none;">
+      <div id="contribute-button-primary" class="hidden">
       </div>
       <button class="btn-icon" onclick="window.hideToolDetails('primary')">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -168,9 +168,9 @@ domains.forEach((domain: any) => {
   <div class="flex justify-between items-start mb-4">
     <h2 id="tool-name-secondary" class="m-0">Tool Name</h2>
     <div class="flex items-center gap-2">
-      <div id="share-button-secondary" style="display: none;">
+      <div id="share-button-secondary" class="hidden">
       </div>
-      <div id="contribute-button-secondary" style="display: none;">
+      <div id="contribute-button-secondary" class="hidden">
       </div>
       <button class="btn-icon" onclick="window.hideToolDetails('secondary')">
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -549,7 +549,7 @@ domains.forEach((domain: any) => {
               </button>
             ` : ''}
           </div>
-          <div ${collapseOnMobile ? 'style="display: none;"' : ''} class="flex flex-wrap gap-1">
+          <div ${collapseOnMobile ? 'class="hidden"' : ''} class="flex flex-wrap gap-1">
             ${conceptLinks}
           </div>
         </div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 84f1288..e050f65 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -20,219 +20,224 @@ const { title, description = 'ForensicPathways - A comprehensive directory of di
   <title>{title} - ForensicPathways</title>
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
   
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      const THEME_KEY = 'dfir-theme';
+<script>
+  // Move utility functions OUTSIDE DOMContentLoaded to avoid race conditions
+  function createToolSlug(toolName) {
+    if (!toolName || typeof toolName !== 'string') {
+      console.warn('[toolHelpers] Invalid toolName provided to createToolSlug:', toolName);
+      return '';
+    }
+    
+    return toolName.toLowerCase()
+      .replace(/[^a-z0-9\s-]/g, '')     // Remove special characters
+      .replace(/\s+/g, '-')             // Replace spaces with hyphens
+      .replace(/-+/g, '-')              // Remove duplicate hyphens
+      .replace(/^-|-$/g, '');           // Remove leading/trailing hyphens
+  }
 
-      function getSystemTheme() {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-      }
+  function findToolByIdentifier(tools, identifier) {
+    if (!identifier || !Array.isArray(tools)) return undefined;
+    
+    return tools.find(tool => 
+      tool.name === identifier || 
+      createToolSlug(tool.name) === identifier.toLowerCase()
+    );
+  }
 
-      function getStoredTheme() {
-        return localStorage.getItem(THEME_KEY) || 'auto';
-      }
+  function isToolHosted(tool) {
+    return tool.projectUrl !== undefined && 
+           tool.projectUrl !== null && 
+           tool.projectUrl !== "" && 
+           tool.projectUrl.trim() !== "";
+  }
 
-      function applyTheme(theme) {
-        const effectiveTheme = theme === 'auto' ? getSystemTheme() : theme;
-        document.documentElement.setAttribute('data-theme', effectiveTheme);
-      }
-
-      function updateThemeToggle(theme) {
-        document.querySelectorAll('[data-theme-toggle]').forEach(button => {
-          button.setAttribute('data-current-theme', theme);
-        });
-      }
-
-      function initTheme() {
-        const storedTheme = getStoredTheme();
-        applyTheme(storedTheme);
-        updateThemeToggle(storedTheme);
-      }
-
-      function toggleTheme() {
-        const current = getStoredTheme();
-        const themes = ['light', 'dark', 'auto'];
-        const currentIndex = themes.indexOf(current);
-        const nextIndex = (currentIndex + 1) % themes.length;
-        const nextTheme = themes[nextIndex];
-        
-        localStorage.setItem(THEME_KEY, nextTheme);
-        applyTheme(nextTheme);
-        updateThemeToggle(nextTheme);
-      }
-
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        if (getStoredTheme() === 'auto') {
-          applyTheme('auto');
-        }
+  // Consolidated scrolling utility - also moved outside DOMContentLoaded
+  function scrollToElement(element, options = {}) {
+    if (!element) return;
+    
+    // Calculate target position manually to avoid double-scroll
+    setTimeout(() => {
+      const headerHeight = document.querySelector('nav')?.offsetHeight || 80;
+      const elementRect = element.getBoundingClientRect();
+      const absoluteElementTop = elementRect.top + window.pageYOffset;
+      const targetPosition = absoluteElementTop - headerHeight - 20; // Adjust this 20 as needed
+      
+      window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
       });
+    }, 100);
+  }
 
-      (window as any).themeUtils = {
-        initTheme,
-        toggleTheme,
-        getStoredTheme
-      };
+  // Convenience functions for common scroll targets
+  function scrollToElementById(elementId, options = {}) {
+    const element = document.getElementById(elementId);
+    scrollToElement(element, options);
+  }
 
-      // Consolidated scrolling utility
-      (window as any).scrollToElement = function(element, options = {}) {
-        if (!element) return;
-        
-        // Calculate target position manually to avoid double-scroll
-        setTimeout(() => {
-          const headerHeight = document.querySelector('nav')?.offsetHeight || 80;
-          const elementRect = element.getBoundingClientRect();
-          const absoluteElementTop = elementRect.top + window.pageYOffset;
-          const targetPosition = absoluteElementTop - headerHeight - 20; // Adjust this 20 as needed
-          
-          window.scrollTo({
-            top: targetPosition,
-            behavior: 'smooth'
-          });
-        }, 100);
-      };
+  function scrollToElementBySelector(selector, options = {}) {
+    const element = document.querySelector(selector);
+    scrollToElement(element, options);
+  }
 
-      // Convenience functions for common scroll targets
-      (window as any).scrollToElementById = function(elementId, options = {}) {
-        const element = document.getElementById(elementId);
-        (window as any).scrollToElement(element, options);
-      };
+  // Attach to window immediately - BEFORE DOMContentLoaded
+  (window as any).createToolSlug = createToolSlug;
+  (window as any).findToolByIdentifier = findToolByIdentifier;
+  (window as any).isToolHosted = isToolHosted;
+  (window as any).scrollToElement = scrollToElement;
+  (window as any).scrollToElementById = scrollToElementById;
+  (window as any).scrollToElementBySelector = scrollToElementBySelector;
 
-      (window as any).scrollToElementBySelector = function(selector, options = {}) {
-        const element = document.querySelector(selector);
-        (window as any).scrollToElement(element, options);
-      };
+  document.addEventListener('DOMContentLoaded', () => {
+    const THEME_KEY = 'dfir-theme';
 
-      function createToolSlug(toolName) {
-        if (!toolName || typeof toolName !== 'string') {
-          console.warn('[toolHelpers] Invalid toolName provided to createToolSlug:', toolName);
-          return '';
-        }
-        
-        return toolName.toLowerCase()
-          .replace(/[^a-z0-9\s-]/g, '')     // Remove special characters
-          .replace(/\s+/g, '-')             // Replace spaces with hyphens
-          .replace(/-+/g, '-')              // Remove duplicate hyphens
-          .replace(/^-|-$/g, '');           // Remove leading/trailing hyphens
-      }
+    function getSystemTheme() {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
 
-      function findToolByIdentifier(tools, identifier) {
-        if (!identifier || !Array.isArray(tools)) return undefined;
-        
-        return tools.find(tool => 
-          tool.name === identifier || 
-          createToolSlug(tool.name) === identifier.toLowerCase()
-        );
-      }
+    function getStoredTheme() {
+      return localStorage.getItem(THEME_KEY) || 'auto';
+    }
 
-      function isToolHosted(tool) {
-        return tool.projectUrl !== undefined && 
-               tool.projectUrl !== null && 
-               tool.projectUrl !== "" && 
-               tool.projectUrl.trim() !== "";
-      }
+    function applyTheme(theme) {
+      const effectiveTheme = theme === 'auto' ? getSystemTheme() : theme;
+      document.documentElement.setAttribute('data-theme', effectiveTheme);
+    }
 
-      (window as any).createToolSlug = createToolSlug;
-      (window as any).findToolByIdentifier = findToolByIdentifier;
-      (window as any).isToolHosted = isToolHosted;
+    function updateThemeToggle(theme) {
+      document.querySelectorAll('[data-theme-toggle]').forEach(button => {
+        button.setAttribute('data-current-theme', theme);
+      });
+    }
 
-      async function checkClientAuth(context = 'general') {
-        try {
-          const response = await fetch('/api/auth/status');
-          const data = await response.json();
-          
-          switch (context) {
-            case 'contributions':
-              return {
-                authenticated: data.contributionAuthenticated,
-                authRequired: data.contributionAuthRequired,
-                expires: data.expires
-              };
-            case 'ai':
-              return {
-                authenticated: data.aiAuthenticated,
-                authRequired: data.aiAuthRequired,
-                expires: data.expires
-              };
-            default:
-              return {
-                authenticated: data.authenticated,
-                authRequired: data.contributionAuthRequired || data.aiAuthRequired,
-                expires: data.expires
-              };
-          }
-        } catch (error) {
-          console.error('Auth check failed:', error);
-          return {
-            authenticated: false,
-            authRequired: true
-          };
-        }
-      }
+    function initTheme() {
+      const storedTheme = getStoredTheme();
+      applyTheme(storedTheme);
+      updateThemeToggle(storedTheme);
+    }
 
-      async function requireClientAuth(callback, returnUrl, context = 'general') {
-        const authStatus = await checkClientAuth(context);
-        
-        if (authStatus.authRequired && !authStatus.authenticated) {
-          const targetUrl = returnUrl || window.location.href;
-          window.location.href = `/api/auth/login?returnTo=${encodeURIComponent(targetUrl)}`;
-          return false;
-        } else {
-          if (typeof callback === 'function') {
-            callback();
-          }
-          return true;
-        }
-      }
-
-      async function showIfAuthenticated(selector, context = 'general') {
-        const authStatus = await checkClientAuth(context);
-        const element = document.querySelector(selector);
-        
-        if (element) {
-          element.style.display = (!authStatus.authRequired || authStatus.authenticated) 
-            ? 'inline-flex' 
-            : 'none';
-        }
-      }
-
-      function setupAuthButtons(selector = '[data-contribute-button]') {
-        document.addEventListener('click', async (e) => {
-          if (!e.target) return;
-          
-          const button = (e.target as Element).closest(selector);
-          if (!button) return;
-          
-          e.preventDefault();
-          
-          console.log('[AUTH] Contribute button clicked:', button.getAttribute('data-contribute-button'));
-          
-          await requireClientAuth(() => {
-            console.log('[AUTH] Navigation approved, redirecting to:', (button as HTMLAnchorElement).href);
-            window.location.href = (button as HTMLAnchorElement).href;
-          }, (button as HTMLAnchorElement).href, 'contributions');
-        });
-      }
-
-      (window as any).checkClientAuth = checkClientAuth;
-      (window as any).requireClientAuth = requireClientAuth;
-      (window as any).showIfAuthenticated = showIfAuthenticated;
-      (window as any).setupAuthButtons = setupAuthButtons;
-
-      initTheme();
-      setupAuthButtons('[data-contribute-button]');
+    function toggleTheme() {
+      const current = getStoredTheme();
+      const themes = ['light', 'dark', 'auto'];
+      const currentIndex = themes.indexOf(current);
+      const nextIndex = (currentIndex + 1) % themes.length;
+      const nextTheme = themes[nextIndex];
       
-      const initAIButton = async () => {
-        await showIfAuthenticated('#ai-view-toggle', 'ai');
-      };
-      initAIButton();
-      
-      console.log('[CONSOLIDATED] All utilities loaded and initialized');
+      localStorage.setItem(THEME_KEY, nextTheme);
+      applyTheme(nextTheme);
+      updateThemeToggle(nextTheme);
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (getStoredTheme() === 'auto') {
+        applyTheme('auto');
+      }
     });
-  </script>
+
+    (window as any).themeUtils = {
+      initTheme,
+      toggleTheme,
+      getStoredTheme
+    };
+
+    async function checkClientAuth(context = 'general') {
+      try {
+        const response = await fetch('/api/auth/status');
+        const data = await response.json();
+        
+        switch (context) {
+          case 'contributions':
+            return {
+              authenticated: data.contributionAuthenticated,
+              authRequired: data.contributionAuthRequired,
+              expires: data.expires
+            };
+          case 'ai':
+            return {
+              authenticated: data.aiAuthenticated,
+              authRequired: data.aiAuthRequired,
+              expires: data.expires
+            };
+          default:
+            return {
+              authenticated: data.authenticated,
+              authRequired: data.contributionAuthRequired || data.aiAuthRequired,
+              expires: data.expires
+            };
+        }
+      } catch (error) {
+        console.error('Auth check failed:', error);
+        return {
+          authenticated: false,
+          authRequired: true
+        };
+      }
+    }
+
+    async function requireClientAuth(callback, returnUrl, context = 'general') {
+      const authStatus = await checkClientAuth(context);
+      
+      if (authStatus.authRequired && !authStatus.authenticated) {
+        const targetUrl = returnUrl || window.location.href;
+        window.location.href = `/api/auth/login?returnTo=${encodeURIComponent(targetUrl)}`;
+        return false;
+      } else {
+        if (typeof callback === 'function') {
+          callback();
+        }
+        return true;
+      }
+    }
+
+    async function showIfAuthenticated(selector, context = 'general') {
+      const authStatus = await checkClientAuth(context);
+      const element = document.querySelector(selector);
+      
+      if (element) {
+        element.style.display = (!authStatus.authRequired || authStatus.authenticated) 
+          ? 'inline-flex' 
+          : 'none';
+      }
+    }
+
+    function setupAuthButtons(selector = '[data-contribute-button]') {
+      document.addEventListener('click', async (e) => {
+        if (!e.target) return;
+        
+        const button = (e.target as Element).closest(selector);
+        if (!button) return;
+        
+        e.preventDefault();
+        
+        console.log('[AUTH] Contribute button clicked:', button.getAttribute('data-contribute-button'));
+        
+        await requireClientAuth(() => {
+          console.log('[AUTH] Navigation approved, redirecting to:', (button as HTMLAnchorElement).href);
+          window.location.href = (button as HTMLAnchorElement).href;
+        }, (button as HTMLAnchorElement).href, 'contributions');
+      });
+    }
+
+    (window as any).checkClientAuth = checkClientAuth;
+    (window as any).requireClientAuth = requireClientAuth;
+    (window as any).showIfAuthenticated = showIfAuthenticated;
+    (window as any).setupAuthButtons = setupAuthButtons;
+
+    initTheme();
+    setupAuthButtons('[data-contribute-button]');
+    
+    const initAIButton = async () => {
+      await showIfAuthenticated('#ai-view-toggle', 'ai');
+    };
+    initAIButton();
+    
+    console.log('[CONSOLIDATED] All utilities loaded and initialized');
+  });
+</script>
 </head>
 <body>
   <Navigation />
-  <main class="container" style="flex: 1; padding: 2rem 1rem;">
+  <main class="container flex-1 py-8 px-4">
     <slot />
   </main>
   <Footer />
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 90018c9..e11069e 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -3,36 +3,36 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="Über das Projekt" description="ForensicPathways - Ein Projekt für die Seminargruppe CC24-w1">
-  <section style="padding: 2rem 0; max-width: 900px; margin: 0 auto;">
-    <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
-      <h1 style="margin-bottom: 1rem; font-size: 2.5rem; color: var(--color-primary);">ForensicPathways</h1>
-      <p style="font-size: 1.25rem; color: var(--color-text-secondary); margin-bottom: 0.5rem;">
+  <section class="section container-narrow">
+    <div class="header-center header-gradient mb-8">
+      <h1 class="text-primary mb-4 text-2xl">ForensicPathways</h1>
+      <p class="text-xl text-secondary mb-2">
         Forensik im Dienst der Transparenz
       </p>
-      <p style="font-size: 1rem; color: var(--color-text-secondary);">
+      <p class="text-base text-secondary">
         Ein Studienprojekt
       </p>
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
           <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
           <path d="M9 11V7a3 3 0 0 1 6 0v4"/>
         </svg>
-        <h2 style="margin: 0; color: var(--color-primary);">Das Ziel</h2>
+        <h2 class="m-0 text-primary">Das Ziel</h2>
       </div>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Diese Seite soll meinen Kommilitonen der Seminargruppe CC24-w1 und anderen interessierten Forensikbegeisterten eine <strong>einfache und übersichtliche Orientierung</strong> 
         bieten: Welches Werkzeug, welche Methode eignet sich für welchen Zweck in der digitalen Forensik?
       </p>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Ich stelle euch dafür <strong>Infrastruktur</strong> zur Verfügung, mit der ihr spezialisierte 
         Forensik-Software direkt einsetzen und erforschen könnt – sei es für <em>Bildungszwecke</em> oder im 
         <em>begrenzten Produktiveinsatz</em>.
       </p>
-      <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; margin-top: 1rem;">
-        <p style="margin: 0; font-size: 0.875rem; color: var(--color-text-secondary);">
+      <div class="bg-secondary p-4 rounded-lg mt-4">
+        <p class="m-0 text-sm text-secondary">
           <strong>💡 Zugang:</strong> Die meisten Dienste sind bequem über das SSO der CC24-Cloud zugänglich, 
           mit nur wenigen Ausnahmen. Der Zugang ist entsprechend vorbehaltlich Absprache auf diesen Personenkreis limitiert.
         </p>
@@ -40,42 +40,42 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
           <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
           <polyline points="9,22 9,12 15,12 15,22"/>
         </svg>
         <h2 style="margin: 0; color: var(--color-accent);">Wissenschaftliche Grundlage</h2>
       </div>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Bei der vorgestellten Software handelt es sich um eine <strong>kuratierte Auswahl</strong> von Anwendungen, 
         vor allem aus dem Bereich der Open-Source-Software.
       </p>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Das zugrunde liegende Modell folgt dem bewährten <strong>NIST-Framework</strong> nach Kent, Chevalier, Grance und Dang 
         (NIST SP 800-86), das ich wegen seiner <em>Einfachheit</em> und <em>praktischen Adaptierbarkeit</em> schätze:
       </p>
-      <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1.5rem 0; text-align: center;">
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Datensammlung</strong>
+      <div class="grid-4 gap-2 my-6 text-center">
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Datensammlung</strong>
         </div>
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Auswertung</strong>
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Auswertung</strong>
         </div>
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Analyse</strong>
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Analyse</strong>
         </div>
-        <div style="background-color: var(--color-bg-secondary); padding: 1rem; border-radius: 0.5rem; border: 2px solid var(--color-accent);">
-          <strong style="color: var(--color-accent);">Bericht</strong>
+        <div class="bg-secondary p-4 rounded-lg border-2 border-accent">
+          <strong class="text-accent">Bericht</strong>
         </div>
       </div>
-      <p style="margin: 0; font-size: 0.875rem; color: var(--color-text-secondary);">
+      <p class="m-0 text-sm text-secondary">
         Diese Prozessphasen werden in der <strong>Matrix-Ansicht</strong> auf der Startseite mit forensischen Wissensdomänen verknüpft.
       </p>
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-warning);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-warning)" stroke-width="2">
           <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
           <path d="M9 12l2 2 4-4"/>
@@ -83,9 +83,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <h2 style="margin: 0; color: var(--color-warning);">Weshalb der Fokus auf Open Source?</h2>
       </div>
       
-      <div style="background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-accent) 100%); color: white; padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem;">
-        <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem;">💡 Zentrale Hypothese</h3>
-        <p style="margin: 0; line-height: 1.6; font-style: italic;">
+      <div class="card-warning rounded-xl p-6 mb-6">
+        <h3 class="m-0 mb-4 text-lg">💡 Zentrale Hypothese</h3>
+        <p class="m-0 leading-normal italic">
           "Die IT-Forensik verlangt nach der Anwendung von wissenschaftlichen Methoden und Objektivität. 
           Die wissenschaftliche Methode verlangt einen transparenten Untersuchungsprozess, der in der Hauptverhandlung 
           bzw. dem Auftraggeber gegenüber stets nachvollziehbar und erklärbar sein muss. 
@@ -127,13 +127,13 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </div>
 
     <div id= "support" class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-primary);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2">
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
         </svg>
-        <h2 style="margin: 0; color: var(--color-primary);">Unterstützung und Kontakt</h2>
+        <h2 class="m-0 text-primary">Unterstützung und Kontakt</h2>
       </div>
-      <p style="margin-bottom: 1rem; line-height: 1.7;">
+      <p class="mb-4 leading-relaxed">
         Falls eine Anwendung nicht wie vorgesehen funktioniert, ihr Unterstützung braucht, der Speicherplatz ausgeht 
         oder sonstige Probleme auftreten: <strong>Schreibt mir einfach auf Signal</strong> oder an <a href="mailto:mstoeck3@hs-mittweida.de">mstoeck3@hs-mittweida.de</a>.
       </p>
@@ -172,7 +172,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     </div>
 
     <div class="card" style="margin-bottom: 2rem; border-left: 4px solid var(--color-accent);">
-      <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;">
+      <div class="flex items-center gap-3 mb-4">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
           <circle cx="8.5" cy="7" r="4"/>
diff --git a/src/pages/auth/callback.astro b/src/pages/auth/callback.astro
index c6634f3..29436b5 100644
--- a/src/pages/auth/callback.astro
+++ b/src/pages/auth/callback.astro
@@ -51,7 +51,7 @@
     <div class="spinner"></div>
     <h2>Processing authentication...</h2>
     <p>Please wait while we complete your login.</p>
-    <div id="error-message" style="display: none;" class="error"></div>
+    <div id="error-message" class="hidden error"></div>
   </div>
 
   <script>
diff --git a/src/pages/contribute/index.astro b/src/pages/contribute/index.astro
index bf88ba3..c24081b 100644
--- a/src/pages/contribute/index.astro
+++ b/src/pages/contribute/index.astro
@@ -14,8 +14,8 @@ const { authenticated, userEmail, userId } = authResult;
 ---
 
 <BaseLayout title="Contribute" description="Inhalte zum ForensicPathways beitragen">
-  <section style="padding: 2rem 0;">
-    <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem; border: 1px solid var(--color-border);">
+  <section class="section-padding">
+    <div class="header-center header-primary mb-8">
       <h1 style="margin-bottom: 1rem; font-size: 2.5rem;">
         <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
           <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -49,7 +49,7 @@ const { authenticated, userEmail, userId } = authResult;
 <div class="card" 
      style="padding: 2rem; border-left: 4px solid var(--color-primary); transition: var(--transition-fast);
             display:flex; flex-direction:column;">
-  <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+  <div class="flex items-center gap-4 mb-6">
     <div style="width: 48px; height: 48px; background-color: var(--color-primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
         <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
@@ -108,7 +108,7 @@ const { authenticated, userEmail, userId } = authResult;
        style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
               display:flex; flex-direction:column;" 
        onclick="window.location.href='/contribute/knowledgebase'">
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+    <div class="flex items-center gap-4 mb-6">
       <div style="width: 48px; height: 48px; background-color: var(--color-accent); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
           <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -142,7 +142,7 @@ const { authenticated, userEmail, userId } = authResult;
   <div class="card" 
        style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
               display:flex; flex-direction:column;">
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+    <div class="flex items-center gap-4 mb-6">
       <div style="width: 48px; height: 48px; background-color: var(--color-warning); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
           <circle cx="12" cy="12" r="10"/>
diff --git a/src/pages/contribute/knowledgebase.astro b/src/pages/contribute/knowledgebase.astro
index a8bcc4d..5fbe533 100644
--- a/src/pages/contribute/knowledgebase.astro
+++ b/src/pages/contribute/knowledgebase.astro
@@ -20,7 +20,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
 <BaseLayout title="Contribute Knowledge Base Article">
   <div class="container" style="max-width: 900px; margin: 0 auto; padding: 2rem 1rem;">
     
-    <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
+    <div class="header-center header-primary rounded-xl">
       <h1 style="margin-bottom: 1rem; font-size: 2rem;">Knowledgebase-Artikel</h1>
       <p style="margin: 0.5rem 0; opacity: 0.9;">Danke für deinen Beitrag!</p>
       {userEmail && <p style="margin: 0.5rem 0; opacity: 0.8;"><strong>Eingeloggt als:</strong> {userEmail}</p>}
@@ -114,7 +114,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           <div class="form-group">
             <label class="form-label">Dokumente, Bilder, Videos (Optional)</label>
             <div class="upload-area" id="upload-area">
-              <input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.txt,.md,.zip,.png,.jpg,.jpeg,.gif,.mp4,.webm" style="display: none;">
+              <input type="file" id="file-input" multiple accept=".pdf,.doc,.docx,.txt,.md,.zip,.png,.jpg,.jpeg,.gif,.mp4,.webm" class="hidden">
               <div class="upload-placeholder">
                 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
@@ -125,7 +125,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
                 <small>Die Dateien landen in der CC24-Cloud. Keine Malware.</small>
               </div>
             </div>
-            <div id="file-list" class="file-list" style="display: none;">
+            <div id="file-list" class="file-list hidden">
               <h5>Ausgewählte Dateien</h5>
               <div id="files-container"></div>
             </div>
@@ -177,7 +177,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           <a href="/" class="btn btn-secondary">Abbruch</a>
           <button type="submit" id="submit-btn" class="btn btn-accent">
             <span id="submit-text">Abschicken</span>
-            <span id="submit-spinner" style="display: none;">⏳</span>
+            <span id="submit-spinner" class="hidden">⏳</span>
           </button>
         </div>
       </form>
@@ -193,7 +193,7 @@ const sortedTools = data.tools.sort((a: any, b: any) => a.name.localeCompare(b.n
           Your knowledge‑base article has been submitted as an issue for review by maintainers.
         </p>
         <div style="display:flex; gap:1rem; justify-content:center;">
-          <a id="issue-link" href="#" target="_blank" class="btn btn-primary" style="display:none;">View Issue</a>
+          <a id="issue-link" href="#" target="_blank" class="btn btn-primary hidden">View Issue</a>
           <a href="/" class="btn btn-secondary">Back to Home</a>
         </div>
       </div>
diff --git a/src/pages/contribute/tool.astro b/src/pages/contribute/tool.astro
index ceec1ca..162b95d 100644
--- a/src/pages/contribute/tool.astro
+++ b/src/pages/contribute/tool.astro
@@ -27,7 +27,7 @@ const isEdit = !!editTool;
 <BaseLayout title={isEdit ? `Edit ${editTool?.name}` : 'Contribute Tool'}>
   <div class="container" style="max-width: 900px; margin: 0 auto; padding: 2rem 1rem;">
     
-    <div style="text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); color: white; border-radius: 1rem;">
+    <div class="header-center header-primary rounded-xl">
       <h1 style="margin-bottom: 1rem; font-size: 2rem;">{isEdit ? `Edit: ${editTool?.name}` : 'Tool / Methode / Konzept beitragen'}</h1>
       <p style="margin: 0.5rem 0; opacity: 0.9;">
         {isEdit 
@@ -105,7 +105,7 @@ const isEdit = !!editTool;
         <div style="border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 2rem;">
           <h3 style="margin: 0 0 1.5rem 0; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">Kategorien</h3>
           
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+          <div class="grid-2 gap-8">
             <div>
               <label style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Forensische Domänen</label>
               <div style="display: grid; gap: 0.5rem;">
@@ -166,7 +166,7 @@ const isEdit = !!editTool;
             </div>
           </div>
 
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+          <div class="grid-2 gap-8">
             <div>
               <label for="accessType" style="display: block; margin-bottom: 0.75rem; font-weight: 600;">Zugriff über:</label>
               <select id="accessType" name="accessType">
@@ -257,7 +257,7 @@ const isEdit = !!editTool;
         <h3 style="margin-bottom: 1rem;">Contribution Submitted!</h3>
         <p id="success-message" style="margin-bottom: 1.5rem;">Your contribution has been submitted successfully.</p>
         <div style="display: flex; gap: 1rem; justify-content: center;">
-          <a id="pr-link" href="#" target="_blank" class="btn btn-primary" style="display: none;">View Pull Request</a>
+          <a id="pr-link" href="#" target="_blank" class="btn btn-primary hidden">View Pull Request</a>
           <a href="/" class="btn btn-secondary">Back to Home</a>
         </div>
       </div>
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
index 0ac4fff..6fca824 100644
--- a/src/pages/impressum.astro
+++ b/src/pages/impressum.astro
@@ -3,8 +3,8 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
 <BaseLayout title="Impressum" description="ForensicPathways - Impressum">
-  <section style="padding: 2rem 0; max-width: 900px; margin: 0 auto;">
-    <div style="text-align: center; margin-bottom: 3rem; padding: 2rem; background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); border-radius: 1rem; border: 1px solid var(--color-border);">
+  <section class="section container-narrow">
+    <div class="header-center header-gradient mb-8">
       <p>Bei dieser Webseite handelt es sich um ein privates Werk. Keine Bildungseinrichtung, kein Unternehmen sind finanziell oder moderierend Teil dieses Projekts.</p>
       <h1>Impressum</h1>
 <p>Angaben gemäß § 5 DDG</p>
@@ -16,7 +16,7 @@ Mario Stöckl<br>
 </p>
 <p><strong>Kontakt:</strong> <br>
 Telefon: 01522-7086296<br>
-E-Mail: <a href='mailto:mario.stoeckl@posteo.de'>mario.stoeckl@posteo.de</a>
+E-Mail: <a href='mailto:mstoeck3@hs-mittweida.de'>mstoeck3@hs-mittweida.de</a>
 </p>
 <p><strong>PGP-Schlüssel:</strong><br>
 Zur sicheren Kommunikation per E-Mail können Sie folgenden PGP-Schlüssel verwenden:<br><br>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b5d0c4..9b6efcd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -60,7 +60,7 @@ const phases = data.phases;
       <p class="approach-info">
         <span class="info-icon">ℹ️</span>
         Die lila gekennzeichneten Einträge sind über das Single-Sign-On der CC24-Cloud direkt zugänglich. 
-        Teilnehmer der Seminargruppe CC24-w1 können die gehostete Infrastruktur nutzen.
+        Teilnehmer der Seminargruppe CC24-w1 (oder andere Berechtigte) können die gehostete Infrastruktur nutzen.
         <a href="/about#support">Kontakt bei Problemen</a>
       </p>
       
@@ -143,8 +143,8 @@ const phases = data.phases;
 
 <TargetedScenarios />
 
-  <section id="filters-section" style="padding: 2rem 0;">
-    <div style="text-align: center; margin-bottom: 2rem;">
+  <section id="filters-section" class="section">
+    <div class="content-center-lg">
       <h3 style="color: var(--color-text); margin-bottom: 0.5rem;">Alle verfügbaren Werkzeuge durchsuchen</h3>
       <p style="color: var(--color-text-secondary); margin: 0;">
         Nutzen Sie die erweiterten Filter und Kategorien für eine detaillierte Suche
diff --git a/src/pages/knowledgebase.astro b/src/pages/knowledgebase.astro
index 6ac39b9..6daf17c 100644
--- a/src/pages/knowledgebase.astro
+++ b/src/pages/knowledgebase.astro
@@ -42,7 +42,7 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
 ---
 
 <BaseLayout title="Knowledgebase" description="Extended documentation and insights for DFIR tools">
-  <section style="padding: 2rem 0;">
+  <section class="section-padding">
     <div class="text-center mb-8 p-8 bg-secondary rounded-lg border">
       <h1 class="mb-4 text-2xl text-primary">Knowledgebase</h1>
       <p class="text-lg text-secondary mb-4">
@@ -209,13 +209,13 @@ knowledgebaseEntries.sort((a: any, b: any) => a.title.localeCompare(b.title));
       )}
     </div>
 
-    <div id="no-kb-results" class="card text-center p-8" style="display: none;">
+    <div id="no-kb-results" class="card text-center p-8 hidden">
       <h3 class="text-secondary mb-2">Keine Ergebnisse gefunden</h3>
       <p class="text-secondary">Versuchen Sie es mit anderen Suchbegriffen.</p>
     </div>
   </section>
   
-  <div id="fab-container" class="fixed bottom-8 right-8 z-50" style="display: none;">
+  <div id="fab-container" class="fixed bottom-8 right-8 z-50 hidden">
     <ContributionButton 
       type="write" 
       variant="primary" 
diff --git a/src/pages/status.astro b/src/pages/status.astro
index 13f1e34..9f73b55 100644
--- a/src/pages/status.astro
+++ b/src/pages/status.astro
@@ -14,8 +14,8 @@ const hostedServices = data.tools.filter((tool: any) => {
 ---
 
 <BaseLayout title="Service Status">
-  <section style="padding: 2rem 0;">
-    <h1 style="text-align: center; margin-bottom: 1rem;">Service Status</h1>
+  <section class="section-padding">
+    <h1 class="content-center">Service Status</h1>
     <p class="text-muted" style="text-align: center; max-width: 600px; margin: 0 auto 3rem;">
       Live-Monitoring zum Onlinestatus der Dienste.
     </p>
diff --git a/src/styles/global copy.css b/src/styles/global copy.css
new file mode 100644
index 0000000..4f1952f
--- /dev/null
+++ b/src/styles/global copy.css	
@@ -0,0 +1,2920 @@
+/* CSS Reset and Base Styles */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* CSS Variables for Theming */
+:root {
+  /* Light Theme Colors */
+  --color-bg: #fff;
+  --color-bg-secondary: #f8fafc;
+  --color-bg-tertiary: #e2e8f0;
+  --color-text: #1e293b;
+  --color-text-secondary: #64748b;
+  --color-border: #cbd5e1;
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-accent: #059669;
+  --color-accent-hover: #047857;
+  --color-warning: #d97706;
+  --color-error: #dc2626;
+  
+  /* Enhanced card type colors */
+  --color-hosted: #7c3aed;
+  --color-hosted-bg: #f3f0ff;
+  --color-oss: #059669;
+  --color-oss-bg: #ecfdf5;
+  --color-method: #0891b2;
+  --color-method-bg: #f0f9ff;
+  --color-concept: #ea580c;
+  --color-concept-bg: #fff7ed;
+  
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%);
+  
+  /* Common transitions */
+  --transition-fast: all 0.2s ease;
+  --transition-medium: all 0.3s ease;
+}
+
+[data-theme="dark"] {
+  --color-bg: #0f172a;
+  --color-bg-secondary: #1e293b;
+  --color-bg-tertiary: #334155;
+  --color-text: #f1f5f9;
+  --color-text-secondary: #94a3b8;
+  --color-border: #475569;
+  --color-primary: #3b82f6;
+  --color-primary-hover: #60a5fa;
+  --color-accent: #10b981;
+  --color-accent-hover: #34d399;
+  --color-warning: #f59e0b;
+  --color-error: #f87171;
+  
+  --color-hosted: #a855f7;
+  --color-hosted-bg: #2e1065;
+  --color-oss: #10b981;
+  --color-oss-bg: #064e3b;
+  --color-method: #0891b2;
+  --color-method-bg: #164e63;
+  --color-concept: #f97316;
+  --color-concept-bg: #7c2d12;
+  
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 30%);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 50%);
+}
+
+/* Base Styles */
+html {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Typography - Consolidated */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 0.5rem;
+}
+
+h1 { font-size: 2.5rem; }
+h2 { font-size: 2rem; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1.125rem; }
+h6 { font-size: 1rem; }
+
+p { margin-bottom: 1rem; }
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+  text-decoration: underline;
+}
+
+/* Container */
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Navigation */
+nav {
+  background-color: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  overflow-x: hidden;
+}
+
+.nav-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  text-decoration: none !important;
+  color: var(--color-text) !important;
+  transition: var(--transition-fast);
+}
+
+.nav-brand:hover {
+  text-decoration: none !important;
+  opacity: 0.8;
+  transform: translateY(-1px);
+}
+
+.nav-logo {
+  width: 32px;
+  height: 32px;
+}
+
+/* Logo theme switching */
+.nav-logo-light { display: block; }
+.nav-logo-dark { display: none; }
+
+[data-theme="dark"] .nav-logo-light { display: none; }
+[data-theme="dark"] .nav-logo-dark { display: block; }
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.nav-link {
+  color: var(--color-text);
+  font-weight: 500;
+  transition: var(--transition-fast);
+  white-space: nowrap;
+}
+
+.nav-link:hover {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.nav-link.active {
+  color: var(--color-primary);
+}
+
+/* Consolidated Button System */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-decoration: none;
+}
+
+.btn:hover { text-decoration: none; }
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.btn-secondary {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-bg-tertiary);
+}
+
+.btn-accent {
+  background-color: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+
+.btn-accent:hover {
+  background-color: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+
+/* Button sizes */
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.btn-xs {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+/* Icon Button */
+.btn-icon {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-icon:hover {
+  color: var(--color-text);
+  background-color: var(--color-bg-secondary);
+}
+
+/* Forms - Consolidated */
+input, select, textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+input:focus, textarea:focus, select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Form validation states */
+input:invalid:not(:focus), textarea:invalid:not(:focus), select:invalid:not(:focus) {
+  border-color: var(--color-error);
+}
+
+input:valid:not(:focus), textarea:valid:not(:focus), select:valid:not(:focus) {
+  border-color: var(--color-accent);
+}
+
+select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  user-select: none;
+}
+
+.checkbox-wrapper:hover {
+  background-color: var(--color-bg-secondary);
+  border-radius: 0.25rem;
+}
+
+.checkbox-wrapper input[type="checkbox"] {
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-primary);
+  margin: 0;
+  cursor: pointer;
+}
+
+/* Consolidated Card System */
+.card {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-fast);
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+/* Card type modifiers using CSS custom properties for DRY */
+.card-hosted {
+  background-color: var(--color-hosted-bg);
+  border-color: var(--color-hosted);
+  box-shadow: 0 0 0 1px var(--color-hosted);
+}
+
+.card-oss {
+  background-color: var(--color-oss-bg);
+  border-color: var(--color-oss);
+}
+
+.card-method {
+  background-color: var(--color-method-bg);
+  border-color: var(--color-method);
+}
+
+.card-concept {
+  background-color: var(--color-concept-bg);
+  border-color: var(--color-concept);
+}
+
+/* Grid Systems - Consolidated */
+.grid-auto-fit {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 350px));
+  gap: 1rem;
+  justify-content: center;
+}
+
+/* Tool Cards - Consolidated */
+.tool-card {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem;
+}
+
+.tool-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  min-height: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.tool-card-header h3 {
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.3;
+  flex: 1;
+  margin-right: 0.75rem;
+}
+
+.tool-card-badges {
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.tool-card .text-muted {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  max-height: calc(1.4em * 3);
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+  word-break: break-word;
+}
+
+.tool-card-metadata {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  line-height: 1;
+}
+
+.metadata-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.metadata-item svg {
+  flex-shrink: 0;
+}
+
+.metadata-item span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.tool-tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  max-height: 3.5rem;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 1rem;
+  flex-shrink: 0;
+}
+
+.tool-tags-container::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 3rem;
+  height: 100%;
+  background: linear-gradient(to right, transparent 0%, var(--color-bg) 70%);
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+/* Card-specific gradients */
+.card-hosted .tool-tags-container::after {
+  background: linear-gradient(to right, transparent 0%, var(--color-hosted-bg) 70%);
+}
+
+.card-oss .tool-tags-container::after {
+  background: linear-gradient(to right, transparent 0%, var(--color-oss-bg) 70%);
+}
+
+.card-method .tool-tags-container::after {
+  background: linear-gradient(to right, transparent 0%, var(--color-method-bg) 70%);
+}
+
+.card-concept .tool-tags-container::after {
+  background: linear-gradient(to right, transparent 0%, var(--color-concept-bg) 70%);
+}
+
+.tool-card-buttons {
+  margin-top: auto;
+  flex-shrink: 0;
+}
+
+.button-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.button-row .btn,
+.single-button {
+  font-size: 0.8125rem;
+  padding: 0.625rem 1rem;
+}
+
+.button-row .btn {
+  flex: 1;
+}
+
+.single-button {
+  width: 100%;
+}
+
+/* Matrix Components - Consolidated */
+.matrix-wrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 800px;
+  table-layout: fixed;
+  background-color: var(--color-bg);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.matrix-table th {
+  background: linear-gradient(135deg, var(--color-primary) 0%, #525252 100%);
+  color: white;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border: none;
+  padding: 1rem 0.75rem;
+}
+
+.matrix-table td {
+  border: 1px solid var(--color-border);
+  padding: 0.75rem;
+  text-align: left;
+  background-color: var(--color-bg);
+  transition: var(--transition-fast);
+  overflow: hidden;
+  word-wrap: break-word;
+}
+
+.matrix-table tr:hover td {
+  background-color: var(--color-bg-secondary);
+}
+
+.matrix-table th:first-child,
+.matrix-table td:first-child {
+  width: 200px;
+  min-width: 200px;
+  max-width: 200px;
+}
+
+.matrix-table th:not(:first-child),
+.matrix-table td:not(:first-child) {
+  width: 150px;
+  min-width: 150px;
+  max-width: 150px;
+}
+
+.matrix-cell {
+  min-height: 60px;
+  vertical-align: top;
+}
+
+/* Matrix highlighting - Consolidated */
+.matrix-table tr.highlight-row th,
+.matrix-table tr.highlight-row td,
+.matrix-table th.highlight-column,
+.matrix-table td.highlight-column {
+  background-color: rgb(37 99 235 / 8%);
+  border-color: rgb(37 99 235 / 20%);
+}
+
+.matrix-table tr.highlight-row th.highlight-column,
+.matrix-table tr.highlight-row td.highlight-column {
+  background-color: rgb(37 99 235 / 15%);
+  border-color: rgb(37 99 235 / 40%);
+  box-shadow: inset 0 0 0 1px rgb(37 99 235 / 30%);
+}
+
+/* Dark theme matrix adjustments */
+[data-theme="dark"] .matrix-table tr.highlight-row th,
+[data-theme="dark"] .matrix-table tr.highlight-row td,
+[data-theme="dark"] .matrix-table th.highlight-column,
+[data-theme="dark"] .matrix-table td.highlight-column {
+  background-color: rgb(59 130 246 / 12%);
+  border-color: rgb(59 130 246 / 30%);
+}
+
+[data-theme="dark"] .matrix-table tr.highlight-row th.highlight-column,
+[data-theme="dark"] .matrix-table tr.highlight-row td.highlight-column {
+  background-color: rgb(59 130 246 / 20%);
+  border-color: rgb(59 130 246 / 50%);
+  box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%);
+}
+
+/* Tool Chips - Consolidated */
+.tool-chip {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  margin: 0.125rem;
+  background-color: var(--color-bg-secondary);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.tool-chip:hover {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.tool-chip-hosted {
+  background-color: var(--color-hosted);
+  color: white;
+}
+
+.tool-chip-oss {
+  background-color: var(--color-oss);
+  color: white;
+}
+
+.tool-chip-method {
+  background-color: var(--color-method);
+  color: white;
+}
+
+/* Consolidated Badge System */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 0.5rem;
+}
+
+.badge--mini {
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.625rem;
+}
+
+.badge-primary { background-color: var(--color-primary); color: white; }
+.badge-secondary { background-color: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-border); }
+.badge-success { background-color: var(--color-accent); color: white; }
+.badge-accent { background-color: var(--color-accent); color: white; }
+.badge-warning { background-color: var(--color-warning); color: white; }
+.badge-error { background-color: var(--color-error); color: white; }
+
+/* Tags */
+.tag {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--color-bg-secondary);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  margin: 0.125rem;
+}
+
+/* Tool Details Modal - Consolidated */
+.tool-details {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 2rem;
+  max-width: 600px;
+  width: 90%;
+  max-height: 85vh; 
+  overflow-y: auto;
+  z-index: 1000;
+  box-shadow: var(--shadow-lg);
+  transition: var(--transition-medium);
+}
+
+.tool-details.active { display: block; }
+
+.modal-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(0 0 0 / 50%);
+  backdrop-filter: blur(2px);
+  z-index: 999;
+}
+
+.modal-overlay.active { display: block; }
+
+/* Side-by-side modal positioning */
+.modals-side-by-side #tool-details-primary.active {
+  left: 25%;
+  transform: translate(-50%, -50%);
+  max-width: 45vw;
+  width: 45vw;
+}
+
+.modals-side-by-side #tool-details-secondary.active {
+  left: 75%;
+  transform: translate(-50%, -50%);
+  max-width: 45vw;
+  width: 45vw;
+}
+
+/* Phase Controls - Consolidated */
+.domain-phase-container {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+.phase-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.phase-button {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.phase-button:hover {
+  border-color: var(--color-primary);
+  background-color: var(--color-bg-secondary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.phase-button.active {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: white;
+}
+
+.phase-button.active:hover {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+/* Tag Cloud - Consolidated */
+.tag-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  max-height: 60px;
+  overflow: hidden;
+  transition: var(--transition-medium);
+  position: relative;
+}
+
+.tag-cloud.expanded { max-height: 1000px; }
+
+.tag-cloud::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--color-bg) 100%);
+  pointer-events: none;
+  opacity: 1;
+  transition: var(--transition-medium);
+}
+
+.tag-cloud.expanded::after { opacity: 0; }
+
+.tag-cloud-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  user-select: none;
+}
+
+.tag-cloud-item.hidden { display: none; }
+
+.tag-cloud-item:hover {
+  border-color: var(--color-primary);
+  background-color: var(--color-bg-secondary);
+  transform: scale(1.05);
+}
+
+.tag-cloud-item.active {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+}
+
+.tag-cloud-item.active:hover {
+  background-color: var(--color-accent-hover);
+  border-color: var(--color-accent-hover);
+}
+
+.tag-frequency {
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.btn-tag-toggle {
+  padding: 0.25rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.btn-tag-toggle:hover {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text);
+  transform: translateY(-1px);
+}
+
+/* Loading states */
+.btn.loading {
+  opacity: 0.7;
+  pointer-events: none;
+  position: relative;
+}
+
+.btn.loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Collaboration Tools - Consolidated */
+.collaboration-tools-compact {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.collaboration-tool-compact {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  min-width: 200px;
+  max-width: 300px;
+  flex: 1;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.collaboration-tool-compact:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.collaboration-tool-compact.hosted {
+  background-color: var(--color-hosted-bg);
+  border-color: var(--color-hosted);
+}
+
+.collaboration-tool-compact.oss {
+  background-color: var(--color-oss-bg);
+  border-color: var(--color-oss);
+}
+
+.collaboration-tool-compact .text-muted {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.3;
+  max-height: calc(1.3em * 3);
+  font-size: 0.75rem;
+  margin: 0.25rem 0;
+  word-break: break-word;
+}
+
+.collaboration-expand-icon {
+  transition: var(--transition-medium);
+  color: var(--color-text-secondary);
+}
+
+.collaboration-expand-icon svg { 
+  transition: var(--transition-medium); 
+}
+
+.collaboration-section-expanded .collaboration-expand-icon svg {
+  transform: rotate(180deg);
+}
+
+.collaboration-content {
+  animation: slideDown 0.3s ease-out;
+}
+
+.tool-compact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 0.5rem;
+}
+
+.tool-count {
+  background: var(--color-bg-tertiary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+/* AI Interface - Consolidated */
+.ai-interface {
+  padding: 2rem 0;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.ai-query-section { margin-bottom: 3rem; }
+
+.ai-input-container textarea {
+  transition: var(--transition-fast);
+}
+
+.ai-input-layout {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.ai-textarea-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.ai-suggestions-section {
+  flex: 0 0 320px;
+  min-height: 120px;
+}
+
+.ai-input-container textarea:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
+}
+
+.ai-loading, .ai-error, .ai-results {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.ai-mode-toggle {
+  user-select: none;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+}
+
+.toggle-label:hover {
+  color: var(--color-primary) !important;
+}
+
+.toggle-label.active {
+  font-weight: 600;
+}
+
+.toggle-switch {
+  position: relative;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.toggle-switch:hover {
+  transform: scale(1.05);
+}
+
+.toggle-slider {
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-fast);
+}
+
+[data-theme="dark"] .toggle-slider {
+  box-shadow: 0 2px 4px 0 rgb(255 255 255 / 10%);
+}
+
+/* Focus states for accessibility - Consolidated */
+.toggle-switch:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 12px;
+}
+
+.toggle-label:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Workflow Components - Consolidated */
+.workflow-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.phase-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.5rem;
+  background-color: var(--color-bg);
+  border: 2px solid var(--color-border);
+  border-radius: 0.75rem;
+  transition: var(--transition-medium);
+}
+
+.phase-header:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.phase-number {
+  width: 2rem;
+  height: 2rem;
+  background: var(--phase-color);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  margin: 0 auto 0.75rem;
+}
+
+.phase-info { flex: 1; min-width: 0; }
+
+.phase-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--color-text);
+}
+
+.phase-description {
+  font-size: 0.8125rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+
+.phase-tools {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.phase-card {
+  background: var(--color-bg-secondary);
+  border: 2px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-align: center;
+  position: relative;
+}
+
+.phase-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--phase-color);
+}
+
+.phase-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--phase-color);
+  box-shadow: var(--shadow-md);
+}
+
+.phase-card.active {
+  border-color: var(--phase-color);
+  background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--phase-color) 8%, transparent) 100%);
+}
+
+.workflow-arrow {
+  display: flex;
+  justify-content: center;
+  margin: 0.5rem 0;
+}
+
+/* Tool Recommendations - Consolidated */
+.tool-recommendation {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  transition: var(--transition-fast);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 200px;
+  animation: fadeInUp 0.3s ease-out;
+}
+
+.tool-recommendation:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.tool-recommendation.hosted {
+  background-color: var(--color-hosted-bg);
+  border-color: var(--color-hosted);
+  box-shadow: 0 0 0 1px var(--color-hosted);
+}
+
+.tool-recommendation.oss {
+  background-color: var(--color-oss-bg);
+  border-color: var(--color-oss);
+}
+
+.tool-recommendation.method {
+  background-color: var(--color-method-bg);
+  border-color: var(--color-method);
+}
+
+.tool-rec-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 0.75rem;
+}
+
+.tool-rec-name {
+  font-weight: 600;
+  font-size: 1rem;
+  margin: 0;
+  color: var(--color-text);
+}
+
+.tool-rec-priority {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.tool-rec-priority.high { background-color: var(--color-error); color: white; }
+.tool-rec-priority.medium { background-color: var(--color-warning); color: white; }
+.tool-rec-priority.low { background-color: var(--color-accent); color: white; }
+
+.tool-rec-justification {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+  font-style: italic;
+  background-color: var(--color-bg-tertiary);
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  border-left: 3px solid var(--color-primary);
+}
+
+.tool-rec-metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+/* Tool Results - Consolidated */
+.tool-results-container {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.tool-recommendations-grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.tool-detailed-recommendation {
+  position: relative;
+  transition: var(--transition-fast);
+  border: 2px solid transparent;
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.tool-detailed-recommendation:nth-child(2) { animation-delay: 0.1s; }
+.tool-detailed-recommendation:nth-child(3) { animation-delay: 0.2s; }
+
+.tool-detailed-recommendation:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-primary);
+}
+
+.tool-detailed-recommendation.card-hosted {
+  background-color: var(--color-hosted-bg);
+  border-color: var(--color-hosted);
+}
+
+.tool-detailed-recommendation.card-hosted:hover {
+  border-color: var(--color-hosted);
+  box-shadow: 0 0 0 1px var(--color-hosted), var(--shadow-lg);
+}
+
+.tool-detailed-recommendation.card-oss {
+  background-color: var(--color-oss-bg);
+  border-color: var(--color-oss);
+}
+
+.tool-detailed-recommendation.card-method {
+  background-color: var(--color-method-bg);
+  border-color: var(--color-method);
+}
+
+.tool-detailed-recommendation.card-method:hover {
+  border-color: var(--color-method);
+  box-shadow: 0 0 0 1px var(--color-method), var(--shadow-lg);
+}
+
+.tool-rank-badge {
+  animation: fadeInUp 0.6s ease-out;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-weight: 700;
+}
+
+[data-theme="dark"] .tool-rank-badge {
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 50%);
+}
+
+.tool-detailed-explanation h4 {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+/* Pros/Cons - Consolidated */
+.pros-cons-section {
+  animation: fadeIn 0.4s ease-in;
+}
+
+.pros, .cons {
+  font-size: 0.875rem;
+}
+
+.pros ul, .cons ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.pros li, .cons li {
+  position: relative;
+  padding-left: 1.5rem;
+  margin-bottom: 0.375rem;
+  line-height: 1.4;
+}
+
+.pros li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  color: var(--color-accent);
+  font-weight: bold;
+}
+
+.cons li::before {
+  content: '⚠';
+  position: absolute;
+  left: 0;
+  color: var(--color-warning);
+  font-weight: bold;
+}
+
+.tool-metadata {
+  background-color: var(--color-bg-secondary);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border-left: 3px solid var(--color-primary);
+}
+
+.alternatives {
+  border-left: 3px solid var(--color-text-secondary);
+}
+
+/* Knowledgebase - Consolidated */
+.kb-entry {
+  margin-bottom: 1rem;
+  transition: var(--transition-fast);
+  position: relative;
+  cursor: pointer;
+}
+
+.kb-entry:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.kb-entry:target {
+  animation: highlight-flash 2s ease-out;
+}
+
+.kb-content { line-height: 1.7; }
+
+/* Footer */
+footer {
+  margin-top: auto;
+  background-color: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border);
+  padding: 2rem 0;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+/* Utility Classes - Systematic Generation */
+.text-muted { color: var(--color-text-secondary); }
+.leading-tight { line-height: 1.25; }
+.leading-relaxed { line-height: 1.625; }
+
+/* Layout utilities */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.text-center { text-align: center; }
+
+.grid { display: grid; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+
+/* Spacing utilities - systematic */
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mt-auto { margin-top: auto; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-3 { margin-right: 0.75rem; }
+
+.p-8 { padding: 2rem; }
+.pt-3 { padding-top: 0.75rem; }
+
+/* Size utilities */
+.w-full { width: 100%; }
+.max-w-lg { max-width: 32rem; }
+.max-w-6xl { max-width: 72rem; }
+.min-w-0 { min-width: 0; }
+
+/* Position utilities */
+.fixed { position: fixed; }
+.relative { position: relative; }
+.bottom-8 { bottom: 2rem; }
+.right-8 { right: 2rem; }
+.z-50 { z-index: 50; }
+
+/* Text utilities */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-lg { font-size: 1.125rem; }
+.text-2xl { font-size: 1.5rem; }
+.font-semibold { font-weight: 600; }
+
+/* Visual utilities */
+.rounded-lg { border-radius: 0.75rem; }
+.border { border: 1px solid var(--color-border); }
+.cursor-pointer { cursor: pointer; }
+.overflow-hidden { overflow: hidden; }
+
+/* Color utilities */
+.bg-secondary { background-color: var(--color-bg-secondary); }
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--color-text-secondary); }
+
+/* Knowledgebase specific */
+#kb-entries {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+/* FAB button */
+.fab-button {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fab-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] .fab-button {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .fab-button:hover {
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
+}
+
+/* Markdown content */
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child {
+  margin-top: 0;
+}
+
+.markdown-content p {
+  margin-bottom: 1rem;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-content li {
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content pre {
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  font-size: 0.875rem;
+}
+
+.markdown-content code:not(pre code) {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875rem;
+}
+
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  background-color: var(--color-bg);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.markdown-content th,
+.markdown-content td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.markdown-content th {
+  background-color: var(--color-bg-secondary);
+  font-weight: 600;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid var(--color-primary);
+  background-color: var(--color-bg-secondary);
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2rem 0;
+}
+
+/* Share Button Styles */
+.share-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-btn:hover {
+  color: var(--color-primary);
+  background-color: var(--color-bg-secondary);
+}
+
+.share-btn--small {
+  padding: 0.125rem;
+}
+
+.share-btn--medium {
+  padding: 0.375rem;
+}
+
+.share-btn svg {
+  flex-shrink: 0;
+}
+
+/* Form styling */
+.form-section {
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  background-color: var(--color-bg);
+}
+
+.form-section h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  color: var(--color-primary);
+  font-size: 1.125rem;
+}
+
+.form-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.form-grid.two-columns {
+  grid-template-columns: 1fr 1fr;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* Animations - Consolidated */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    padding-top: 0;
+    margin-top: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    max-height: 1000px;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes highlight-flash {
+  0% { 
+    background-color: rgb(57 255 20 / 60%);
+    box-shadow: 0 0 0 8px rgb(255 20 147 / 50%), 0 0 20px rgb(57 255 20 / 80%);
+    transform: scale(1.12) rotate(2deg);
+    border: 3px solid rgb(255 255 0);
+  }
+  12.5% { 
+    background-color: rgb(255 20 147 / 70%);
+    box-shadow: 0 0 0 15px rgb(0 191 255 / 60%), 0 0 30px rgb(255 20 147 / 90%);
+    transform: scale(1.18) rotate(-3deg);
+    border: 3px solid rgb(57 255 20);
+  }
+  25% { 
+    background-color: rgb(0 191 255 / 65%);
+    box-shadow: 0 0 0 12px rgb(191 0 255 / 55%), 0 0 25px rgb(0 191 255 / 85%);
+    transform: scale(1.15) rotate(1deg);
+    border: 3px solid rgb(255 20 147);
+  }
+  37.5% { 
+    background-color: rgb(191 0 255 / 75%);
+    box-shadow: 0 0 0 18px rgb(255 255 0 / 65%), 0 0 35px rgb(191 0 255 / 95%);
+    transform: scale(1.20) rotate(-2deg);
+    border: 3px solid rgb(0 191 255);
+  }
+  50% { 
+    background-color: rgb(255 255 0 / 80%);
+    box-shadow: 0 0 0 10px rgb(57 255 20 / 70%), 0 0 40px rgb(255 255 0 / 100%);
+    transform: scale(1.16) rotate(3deg);
+    border: 3px solid rgb(191 0 255);
+  }
+  62.5% { 
+    background-color: rgb(255 69 0 / 70%);
+    box-shadow: 0 0 0 16px rgb(255 20 147 / 60%), 0 0 30px rgb(255 69 0 / 90%);
+    transform: scale(1.22) rotate(-1deg);
+    border: 3px solid rgb(255 255 0);
+  }
+  75% { 
+    background-color: rgb(255 20 147 / 65%);
+    box-shadow: 0 0 0 14px rgb(0 191 255 / 50%), 0 0 45px rgb(255 20 147 / 85%);
+    transform: scale(1.14) rotate(2deg);
+    border: 3px solid rgb(57 255 20);
+  }
+  87.5% { 
+    background-color: rgb(57 255 20 / 75%);
+    box-shadow: 0 0 0 20px rgb(191 0 255 / 65%), 0 0 35px rgb(57 255 20 / 95%);
+    transform: scale(1.25) rotate(-3deg);
+    border: 3px solid rgb(255 69 0);
+  }
+  100% { 
+    background-color: transparent;
+    box-shadow: none;
+    transform: scale(1) rotate(0deg);
+    border: none;
+  }
+}
+
+/* Highlight animation triggers */
+.tool-card.highlight-flash,
+.tool-chip.highlight-flash,
+.tool-recommendation.highlight-flash {
+  animation: highlight-flash 2s ease-out;
+}
+
+/* Responsive Design - Consolidated Media Queries */
+@media (width >= 768px) {
+  #kb-entries {
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 1.5rem;
+  }
+}
+
+@media (width >= 1200px) {
+  #kb-entries {
+    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+    gap: 2rem;
+  }
+  
+  .modals-side-by-side #tool-details-primary.active,
+  .modals-side-by-side #tool-details-secondary.active {
+    max-width: 45vw;
+    width: 45vw;
+  }
+}
+
+@media (width <= 1200px) {
+  .modals-side-by-side #tool-details-primary.active,
+  .modals-side-by-side #tool-details-secondary.active {
+    max-width: 42vw;
+    width: 42vw;
+  }
+}
+
+@media (width <= 768px) {
+  .nav-wrapper { padding: 0.75rem; }
+  .nav-links { gap: 1rem; }
+  .nav-link { font-size: 0.875rem; }
+  
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .domain-phase-container {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .phase-buttons { gap: 0.375rem; }
+  .phase-button {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .tag-cloud { max-height: 100px; }
+  .tag-header { gap: 0.75rem; }
+  
+  .matrix-table { min-width: 600px; }
+  .matrix-table th:first-child,
+  .matrix-table td:first-child {
+    width: 140px;
+    min-width: 140px;
+    max-width: 140px;
+  }
+  .matrix-table th:not(:first-child),
+  .matrix-table td:not(:first-child) {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+  }
+  .matrix-cell {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+    min-height: 50px;
+  }
+  
+  .modals-side-by-side #tool-details-primary.active {
+    top: 25%;
+    left: 50%;
+    max-width: 90vw;
+    width: 90vw;
+    max-height: 35vh;
+  }
+  
+  .modals-side-by-side #tool-details-secondary.active {
+    top: 75%;
+    left: 50%;
+    max-width: 90vw;
+    width: 90vw;
+    max-height: 35vh;
+  }
+  
+  .tool-details {
+    max-height: 80vh; 
+    padding: 1.5rem; 
+    width: 95%; 
+    max-width: none;
+  }
+
+  .form-grid.two-columns {
+    grid-template-columns: 1fr;
+  }
+  .hint-card {
+    padding: 1rem;
+  }
+  
+  .hint-description {
+    font-size: 0.6875rem;
+  }
+  
+  .hint-trigger {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .ai-input-layout {
+    gap: 0.75rem;
+    flex-direction: column;
+  }
+  .ai-suggestions-section {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+  }
+  .ai-textarea-section {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    min-height: 100px;
+  }
+  .approach-hero { 
+    padding: 2rem 1rem; 
+    margin: 1rem 0;
+  }
+  
+  .approach-content h1 { 
+    font-size: 2rem; 
+  }
+  
+  .hero-tagline {
+    font-size: 1.125rem;
+  }
+  
+  .approach-selector { 
+    grid-template-columns: 1fr; 
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .approach-card { 
+    padding: 1.5rem; 
+  }
+  
+  .approach-header {
+    gap: 0.75rem;
+  }
+  
+  .approach-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+  
+  .approach-card h3 {
+    font-size: 1.25rem;
+  }
+  
+  .quick-actions {
+    gap: 0.75rem;
+  }
+  
+  .quick-actions .btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.8125rem;
+  }
+  .nist-workflow { 
+    grid-template-columns: 1fr 1fr; 
+    gap: 0.75rem;
+  }
+  .search-suggestions {
+    gap: 0.5rem;
+  }
+  
+  .suggestion-chip {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .scenario-emoji {
+    font-size: 1rem;
+  }
+  
+  .targeted-search-input {
+    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
+  }
+  
+  .search-icon {
+    left: 0.875rem;
+  }
+}
+
+@media (width <= 640px) {
+  .phase-buttons { justify-content: center; }
+  .phase-button {
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+  }
+  
+  .tag-cloud { max-height: 80px; }
+  .tag-cloud.expanded { max-height: 800px; }
+  
+  .nav-wrapper {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.75rem;
+  }
+  
+  .nav-links {
+    gap: 0.75rem;
+    justify-content: center;
+    width: 100%;
+  }
+  
+  .nav-link {
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .ai-mode-toggle {
+    flex-direction: column;
+    gap: 0.75rem;
+    text-align: center;
+  }
+  
+  .toggle-label {
+    font-size: 0.8125rem;
+  }
+  
+  .toggle-switch {
+    align-self: center;
+  }
+  
+  .pros-cons-section {
+    grid-template-columns: 1fr;
+  }
+  
+  .card {
+    padding: 1rem;
+  }
+  
+  .form-grid {
+    gap: 0.75rem;
+  }
+  
+  .kb-entry {
+    padding: 1rem;
+  }
+  
+  .kb-entry .flex-between {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .kb-entry .flex-shrink-0 {
+    align-self: stretch;
+  }
+  
+  .kb-entry .flex-shrink-0 .flex {
+    justify-content: space-between;
+    width: 100%;
+  }
+  
+  .btn-sm {
+    padding: 0.5rem 1rem;
+    flex: 1;
+  }
+  .search-suggestions {
+    justify-content: center;
+  }
+  
+  .suggestion-chip {
+    flex: 1;
+    min-width: 0;
+    max-width: calc(50% - 0.25rem);
+    justify-content: center;
+  }
+  
+  .targeted-section {
+    padding: 1.5rem;
+  }
+}
+
+@media (width <= 480px) {
+  .phase-buttons {
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  
+  .phase-button { width: 100%; }
+  
+  .phase-tools { grid-template-columns: 1fr; }
+  
+  .collaboration-tools-compact { 
+    flex-direction: column; 
+  }
+  .collaboration-tool-compact { 
+    min-width: auto; 
+    max-width: none; 
+  }
+  
+  .nav-wrapper { gap: 0.75rem; }
+  .nav-links {
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .nav-link {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.375rem;
+  }
+  
+  .tool-details {
+    max-height: 75vh; 
+    padding: 1rem; 
+    border-radius: 0.25rem; 
+  }
+  
+  .kb-entry .badge {
+    font-size: 0.625rem;
+    padding: 0.125rem 0.375rem;
+  }
+  
+  .kb-entry .text-lg {
+    font-size: 1rem;
+  }
+  
+  .kb-entry .flex.gap-4 {
+    gap: 0.75rem;
+  }
+  
+  .kb-entry .flex.gap-2 {
+    gap: 0.5rem;
+  }
+
+  
+  .prompting-card {
+    padding: 0.75rem;
+  }
+  
+  .suggestion-item {
+    padding: 0.375rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  
+  .position-badge {
+    width: 28px;
+    height: 28px;
+    font-size: 0.875rem;
+  }
+  
+  .queue-status-card {
+    padding: 1rem;
+  }
+  .hint-card {
+    padding: 0.75rem;
+  }
+  
+  .hint-title {
+    font-size: 0.8125rem;
+  }
+  
+  .hint-description {
+    font-size: 0.625rem;
+  }
+  .approach-info {
+    padding: 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .quick-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .quick-actions .btn {
+    width: 100%;
+    max-width: 280px;
+  }
+  .nist-workflow { 
+  grid-template-columns: 1fr; 
+  }
+}
+
+/* Smart Prompting Styles - Simplified */
+.smart-prompting-container {
+  height: 100%;
+  animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.prompting-card {
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  opacity: 0.85;
+  transition: var(--transition-fast);
+}
+
+.prompting-card:hover {
+  opacity: 1;
+  border-color: var(--color-accent);
+}
+
+.prompting-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.status-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.status-text {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text);
+  flex: 1;
+}
+
+.prompting-spinner {
+  flex-shrink: 0;
+  animation: spin 1s linear infinite;
+}
+
+/* Smart Prompting Hint */
+.smart-prompting-hint {
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  animation: hintFadeIn 0.3s ease-in-out;
+}
+
+.hint-card {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border: 1px dashed var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  width: 100%;
+  text-align: center;
+  opacity: 0.7;
+  transition: var(--transition-medium);
+}
+
+.hint-card:hover {
+  opacity: 0.9;
+  border-color: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+.hint-icon {
+  margin-bottom: 0.75rem;
+  opacity: 0.8;
+}
+
+.hint-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hint-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+  letter-spacing: 0.025em;
+}
+
+.hint-description {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}
+
+.hint-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.hint-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+}
+
+.hint-value {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-accent);
+  background-color: var(--color-bg);
+  padding: 0.125rem 0.5rem;
+  border-radius: 1rem;
+  border: 1px solid var(--color-accent);
+}
+
+/* Hide hint when smart prompting is active */
+.smart-prompting-container[style*="block"] ~ .smart-prompting-hint,
+.smart-prompting-container:not([style*="none"]) ~ .smart-prompting-hint {
+  display: none;
+}
+
+@keyframes hintFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 0.7;
+    transform: translateY(0);
+  }
+}
+
+.suggested-questions {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.suggestions-header {
+  margin-bottom: 0.75rem;
+}
+
+.suggestions-label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.questions-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.suggestion-item {
+  background-color: var(--color-bg);
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--color-text-secondary);
+  border-left: 2px solid var(--color-accent);
+  transition: var(--transition-fast);
+  position: relative;
+}
+
+.suggestion-item::before {
+  content: counter(suggestion-counter);
+  counter-increment: suggestion-counter;
+  position: absolute;
+  left: -8px;
+  top: -6px;
+  background-color: var(--color-accent);
+  color: white;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  font-weight: 600;
+}
+.questions-list {
+  counter-reset: suggestion-counter;
+}
+
+.suggestion-number {
+  color: var(--color-accent);
+  font-weight: 600;
+  margin-right: 0.5rem;
+}
+
+.suggestion-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 2rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+.suggestion-chip:hover {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.suggestion-chip.active {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+}
+
+.scenario-emoji {
+  font-size: 1.125rem;
+}
+
+.scenario-text {
+  font-weight: 500;
+}
+
+.more-scenarios {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.btn-more-scenarios {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  padding: 0.5rem 1rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  transition: var(--transition-fast);
+}
+
+.btn-more-scenarios:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.targeted-tip {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.targeted-tip p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.dismiss-button {
+  align-self: flex-end;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: var(--transition-fast);
+  opacity: 0.7;
+}
+
+.dismiss-button:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+/* Queue Status - Improved Design */
+.queue-status-card {
+  max-width: 400px;
+  margin: 1.5rem auto 0;
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.queue-position-display {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.position-badge {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.position-label {
+  font-weight: 600;
+  color: var(--color-text);
+  font-size: 0.9375rem;
+}
+
+.queue-details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.queue-stat {
+  text-align: center;
+  padding: 0.75rem;
+  background-color: var(--color-bg);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+}
+
+.stat-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.stat-unit {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-left: 0.25rem;
+}
+
+.queue-progress-container {
+  position: relative;
+}
+
+.queue-progress-track {
+  background-color: var(--color-bg);
+  border-radius: 8px;
+  height: 6px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  margin-bottom: 0.75rem;
+}
+
+.queue-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  width: 0%;
+  transition: width 0.3s ease;
+  border-radius: 8px;
+}
+
+.task-id-display {
+  text-align: center;
+  padding: 0.5rem;
+  background-color: var(--color-bg);
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-border);
+}
+
+.task-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  margin-right: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  font-weight: 500;
+}
+
+.task-id {
+  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 0.6875rem;
+  color: var(--color-text);
+  background-color: var(--color-bg-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+}
+
+@keyframes smartPromptSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+    max-height: 0;
+  }
+  to {
+    opacity: 0.85;
+    transform: translateX(0);
+    max-height: 300px;
+  }
+}
+
+
+/* Enhanced contextual analysis cards */
+.contextual-analysis-card {
+  margin-bottom: 2rem;
+  border-left: 4px solid;
+  transition: var(--transition-fast);
+}
+
+.contextual-analysis-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.contextual-analysis-card.scenario {
+  border-left-color: var(--color-primary);
+}
+
+.contextual-analysis-card.approach {
+  border-left-color: var(--color-accent);
+}
+
+.contextual-analysis-card.critical {
+  border-left-color: var(--color-warning);
+}
+
+.analysis-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.analysis-header.scenario { color: var(--color-primary); }
+.analysis-header.approach { color: var(--color-accent); }
+.analysis-header.critical { color: var(--color-warning); }
+
+/* Methodology-First Approach Styles */
+.approach-hero {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border-radius: 1rem;
+  border: 1px solid var(--color-border);
+  padding: 3rem 2rem;
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.approach-content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: var(--color-primary);
+}
+
+.hero-tagline {
+  font-size: 1.25rem;
+  color: var(--color-text);
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+.hero-subtitle {
+  color: var(--color-text-secondary);
+  margin-bottom: 2rem;
+  line-height: 1.6;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.approach-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  max-width: 900px;
+  margin: 0 auto 2rem;
+}
+
+.approach-card {
+  background: var(--color-bg);
+  border: 2px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  text-align: left;
+  position: relative;
+  overflow: hidden;
+}
+
+.approach-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--approach-color);
+  opacity: 0.7;
+}
+
+.approach-card.methodology { --approach-color: var(--color-primary); }
+.approach-card.targeted { --approach-color: var(--color-accent); }
+
+.approach-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--approach-color);
+}
+
+.approach-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.approach-icon {
+  width: 3rem;
+  height: 3rem;
+  background: var(--approach-color);
+  color: white;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.approach-card h3 {
+  font-size: 1.375rem;
+  color: var(--color-text);
+  margin: 0;
+}
+
+.approach-card.selected {
+  border-color: var(--approach-color);
+  background: linear-gradient(135deg, var(--color-bg) 0%, color-mix(in srgb, var(--approach-color) 8%, transparent) 100%);
+  box-shadow: var(--shadow-md);
+}
+
+.approach-description {
+  color: var(--color-text-secondary);
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.approach-features {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.approach-features li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.approach-features li::before {
+  content: '✓';
+  color: var(--approach-color);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.approach-actions {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.approach-info {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  text-align: left;
+}
+
+.info-icon {
+  margin-right: 0.5rem;
+  font-size: 1rem;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.quick-actions .btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+}
+
+.methodology-section {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  margin: 2rem 0;
+  display: none;
+}
+
+.methodology-section.active { 
+  display: block; 
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.methodology-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.methodology-header h3 {
+  color: var(--color-primary);
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.methodology-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.methodology-tip {
+  text-align: center;
+  padding: 1.5rem;
+  background: var(--color-bg-secondary);
+  border-radius: 0.5rem;
+}
+
+.methodology-tip p {
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.nist-workflow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.targeted-section {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  margin: 2rem 0;
+  display: none;
+  animation: fadeInUp 0.5s ease-out;
+}
+
+.targeted-section.active { 
+  display: block; 
+}
+
+.targeted-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.targeted-header h3 {
+  color: var(--color-accent);
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.targeted-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.search-interface {
+  max-width: 800px;
+  margin: 0 auto 2rem;
+}
+
+.search-box {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.search-icon {
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-secondary);
+  pointer-events: none;
+}
+
+.targeted-search-input {
+  width: 100%;
+  padding: 1rem 1rem 1rem 3rem;
+  border: 2px solid var(--color-border);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  transition: var(--transition-fast);
+}
+
+.targeted-search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px rgb(5 150 105 / 10%);
+}
+
+.search-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 4f1952f..c4c140b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,4 +1,11 @@
-/* CSS Reset and Base Styles */
+/* ===================================================================
+   FORENSIC PATHWAYS - CONSOLIDATED STYLESHEET
+   ================================================================= */
+
+/* ===================================================================
+   1. CSS RESET AND BASE STYLES
+   ================================================================= */
+
 *,
 *::before,
 *::after {
@@ -7,7 +14,10 @@
   padding: 0;
 }
 
-/* CSS Variables for Theming */
+/* ===================================================================
+   2. CSS VARIABLES AND THEMING
+   ================================================================= */
+
 :root {
   /* Light Theme Colors */
   --color-bg: #fff;
@@ -33,11 +43,12 @@
   --color-concept: #ea580c;
   --color-concept-bg: #fff7ed;
   
+  /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%);
   
-  /* Common transitions */
+  /* Transitions */
   --transition-fast: all 0.2s ease;
   --transition-medium: all 0.3s ease;
 }
@@ -70,7 +81,10 @@
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 50%);
 }
 
-/* Base Styles */
+/* ===================================================================
+   3. BASE HTML ELEMENTS
+   ================================================================= */
+
 html {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
@@ -86,7 +100,7 @@ body {
   flex-direction: column;
 }
 
-/* Typography - Consolidated */
+/* Typography */
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.25;
@@ -113,7 +127,11 @@ a:hover {
   text-decoration: underline;
 }
 
-/* Container */
+/* ===================================================================
+   4. LAYOUT UTILITIES (CONSOLIDATED)
+   ================================================================= */
+
+/* Container System */
 .container {
   width: 100%;
   max-width: 1280px;
@@ -121,7 +139,381 @@ a:hover {
   padding: 0 1rem;
 }
 
-/* Navigation */
+.container-narrow {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.container-wide {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Section Utilities */
+.section {
+  padding: 2rem 0;
+}
+
+.section-sm {
+  padding: 1rem 0;
+}
+
+.section-lg {
+  padding: 3rem 0;
+}
+
+/* Flex Utilities */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-start {
+  display: flex;
+  align-items: flex-start;
+}
+
+.flex-end {
+  display: flex;
+  align-items: flex-end;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+/* Grid Utilities */
+.grid {
+  display: grid;
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.grid-4 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+.grid-auto-fit {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 350px));
+  gap: 1rem;
+  justify-content: center;
+}
+
+.grid-auto-fit-sm {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.grid-auto-fit-lg {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 1rem;
+}
+
+/* Gap Utilities */
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-8 { gap: 2rem; }
+
+/* ===================================================================
+   5. SPACING UTILITIES (SYSTEMATIC)
+   ================================================================= */
+
+/* Margin Utilities */
+.m-0 { margin: 0; }
+.m-1 { margin: 0.25rem; }
+.m-2 { margin: 0.5rem; }
+.m-3 { margin: 0.75rem; }
+.m-4 { margin: 1rem; }
+.m-6 { margin: 1.5rem; }
+.m-8 { margin: 2rem; }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mt-6 { margin-top: 1.5rem; }
+.mt-8 { margin-top: 2rem; }
+.mt-auto { margin-top: auto; }
+
+.mr-1 { margin-right: 0.25rem; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-3 { margin-right: 0.75rem; }
+.mr-4 { margin-right: 1rem; }
+
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+
+.ml-1 { margin-left: 0.25rem; }
+.ml-2 { margin-left: 0.5rem; }
+.ml-3 { margin-left: 0.75rem; }
+.ml-4 { margin-left: 1rem; }
+
+/* Padding Utilities */
+.p-0 { padding: 0; }
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.p-8 { padding: 2rem; }
+
+.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+
+.pt-3 { padding-top: 0.75rem; }
+.pb-2 { padding-bottom: 0.5rem; }
+
+/* ===================================================================
+   6. TARGETED UTILITY CLASSES (FOR INLINE STYLE CONSOLIDATION)
+   ================================================================= */
+
+/* Section/Content Utilities */
+.section-padding { padding: 2rem 0; }
+.content-center { text-align: center; margin-bottom: 1rem; }
+.content-center-lg { text-align: center; margin-bottom: 2rem; }
+.content-narrow { max-width: 900px; margin: 0 auto; }
+.content-wide { max-width: 1200px; margin: 0 auto; }
+
+/* Card Info Variants (for inline background/padding combinations) */
+.card-info-sm { 
+  background-color: var(--color-bg-secondary); 
+  padding: 1rem; 
+  border-radius: 0.5rem; 
+}
+
+.card-info-md { 
+  background-color: var(--color-bg-secondary); 
+  padding: 1.5rem; 
+  border-radius: 0.75rem; 
+  border: 1px solid var(--color-border); 
+}
+
+.card-info-lg { 
+  background-color: var(--color-bg-secondary); 
+  padding: 2rem; 
+  border-radius: 1rem; 
+  border: 1px solid var(--color-border); 
+}
+
+/* Header/Title Combinations */
+.header-center { 
+  text-align: center; 
+  margin-bottom: 2rem; 
+  padding: 2rem; 
+}
+
+.header-gradient {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%); 
+  border-radius: 1rem; 
+  border: 1px solid var(--color-border);
+}
+
+.header-primary {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); 
+  color: white;
+}
+
+/* Metadata/Info Text Combinations */
+.info-text {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+.info-text-center {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  text-align: center;
+  line-height: 1.6;
+}
+
+/* Grid Auto-fit Variants for common inline grid patterns */
+.grid-auto-300 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1rem;
+}
+
+.grid-auto-400 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 1rem;
+}
+
+.grid-auto-500 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Add to global.css */
+.pros-cons-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+.tool-metadata { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
+.grid-cols-2 { grid-template-columns: 1fr 1fr; }
+.flex-shrink-1 { flex-shrink: 1; }
+
+/* ===================================================================
+   7. TEXT AND DISPLAY UTILITIES
+   ================================================================= */
+
+/* Text Utilities */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 0.875rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+
+.leading-tight { line-height: 1.25; }
+.leading-normal { line-height: 1.5; }
+.leading-relaxed { line-height: 1.625; }
+
+/* Color Utilities */
+.text-muted { color: var(--color-text-secondary); }
+.text-primary { color: var(--color-primary); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-accent { color: var(--color-accent); }
+.text-warning { color: var(--color-warning); }
+.text-error { color: var(--color-error); }
+
+/* Display Utilities */
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.hidden { display: none; }
+
+/* Size Utilities */
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.min-w-0 { min-width: 0; }
+.max-w-lg { max-width: 32rem; }
+.max-w-6xl { max-width: 72rem; }
+
+/* Position Utilities */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+
+.top-0 { top: 0; }
+.bottom-8 { bottom: 2rem; }
+.right-8 { right: 2rem; }
+.left-0 { left: 0; }
+
+.z-10 { z-index: 10; }
+.z-50 { z-index: 50; }
+.z-100 { z-index: 100; }
+
+/* Overflow Utilities */
+.overflow-hidden { overflow: hidden; }
+.overflow-auto { overflow: auto; }
+
+/* Border Utilities */
+.border { border: 1px solid var(--color-border); }
+.border-t { border-top: 1px solid var(--color-border); }
+.border-l-4 { border-left: 4px solid; }
+
+.rounded { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.375rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-2xl { border-radius: 1rem; }
+
+/* Background Utilities */
+.bg-secondary { background-color: var(--color-bg-secondary); }
+.bg-tertiary { background-color: var(--color-bg-tertiary); }
+
+/* Cursor Utilities */
+.cursor-pointer { cursor: pointer; }
+
+.h-12 { height: 3rem; }
+.align-middle { vertical-align: middle; }
+
+
+/* ===================================================================
+   7. NAVIGATION
+   ================================================================= */
+
 nav {
   background-color: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border);
@@ -161,7 +553,6 @@ nav {
   height: 32px;
 }
 
-/* Logo theme switching */
 .nav-logo-light { display: block; }
 .nav-logo-dark { display: none; }
 
@@ -192,7 +583,10 @@ nav {
   color: var(--color-primary);
 }
 
-/* Consolidated Button System */
+/* ===================================================================
+   8. BUTTON SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -207,15 +601,20 @@ nav {
   text-decoration: none;
 }
 
-.btn:hover { text-decoration: none; }
+.btn:hover { 
+  text-decoration: none; 
+}
 
+/* Button Variants */
 .btn-primary {
   background-color: var(--color-primary);
   color: white;
+  border-color: var(--color-primary);
 }
 
 .btn-primary:hover {
   background-color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
 }
 
 .btn-secondary {
@@ -226,6 +625,7 @@ nav {
 
 .btn-secondary:hover {
   background-color: var(--color-bg-tertiary);
+  border-color: var(--color-primary);
 }
 
 .btn-accent {
@@ -239,15 +639,26 @@ nav {
   border-color: var(--color-accent-hover);
 }
 
-/* Button sizes */
+.btn-danger {
+  background-color: var(--color-error);
+  color: white;
+  border-color: var(--color-error);
+}
+
+/* Button Sizes */
+.btn-xs {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
 .btn-sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.8125rem;
 }
 
-.btn-xs {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
+.btn-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
 }
 
 /* Icon Button */
@@ -269,7 +680,31 @@ nav {
   background-color: var(--color-bg-secondary);
 }
 
-/* Forms - Consolidated */
+/* Loading State */
+.btn.loading {
+  opacity: 0.7;
+  pointer-events: none;
+  position: relative;
+}
+
+.btn.loading::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* ===================================================================
+   9. FORM SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 input, select, textarea {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -288,15 +723,6 @@ input:focus, textarea:focus, select:focus {
   outline-offset: 2px;
 }
 
-/* Form validation states */
-input:invalid:not(:focus), textarea:invalid:not(:focus), select:invalid:not(:focus) {
-  border-color: var(--color-error);
-}
-
-input:valid:not(:focus), textarea:valid:not(:focus), select:valid:not(:focus) {
-  border-color: var(--color-accent);
-}
-
 select {
   cursor: pointer;
   appearance: none;
@@ -320,11 +746,6 @@ select {
   border-radius: 0.25rem;
 }
 
-.checkbox-wrapper input[type="checkbox"] {
-  margin-right: 0.5rem;
-  cursor: pointer;
-}
-
 input[type="checkbox"] {
   width: 16px;
   height: 16px;
@@ -333,7 +754,46 @@ input[type="checkbox"] {
   cursor: pointer;
 }
 
-/* Consolidated Card System */
+/* Form Layout */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.form-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.form-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+
+/* ===================================================================
+   10. CARD SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .card {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
@@ -347,7 +807,35 @@ input[type="checkbox"] {
   box-shadow: var(--shadow-md);
 }
 
-/* Card type modifiers using CSS custom properties for DRY */
+/* Card Variants */
+.card-sm {
+  padding: 1rem;
+}
+
+.card-lg {
+  padding: 2rem;
+}
+
+.card-info {
+  background-color: var(--color-bg-secondary);
+  border-left: 4px solid var(--color-primary);
+}
+
+.card-warning {
+  background-color: var(--color-warning);
+  color: white;
+}
+
+.card-gradient {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+}
+
+.card-hero {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  color: white;
+}
+
+/* Card Type Modifiers */
 .card-hosted {
   background-color: var(--color-hosted-bg);
   border-color: var(--color-hosted);
@@ -369,20 +857,50 @@ input[type="checkbox"] {
   border-color: var(--color-concept);
 }
 
-/* Grid Systems - Consolidated */
-.grid-auto-fit {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 350px));
-  gap: 1rem;
-  justify-content: center;
+/* ===================================================================
+   11. BADGE AND TAG SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
-/* Tool Cards - Consolidated */
+.badge-mini {
+  padding: 0.0625rem 0.375rem;
+  font-size: 0.625rem;
+}
+
+.badge-primary { background-color: var(--color-primary); color: white; }
+.badge-secondary { background-color: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-border); }
+.badge-success { background-color: var(--color-accent); color: white; }
+.badge-accent { background-color: var(--color-accent); color: white; }
+.badge-warning { background-color: var(--color-warning); color: white; }
+.badge-error { background-color: var(--color-error); color: white; }
+
+.tag {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--color-bg-secondary);
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  margin: 0.125rem;
+}
+
+/* ===================================================================
+   12. TOOL CARD SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .tool-card {
   height: 300px;
   display: flex;
   flex-direction: column;
   padding: 1.25rem;
+  cursor: pointer;
 }
 
 .tool-card-header {
@@ -473,7 +991,6 @@ input[type="checkbox"] {
   opacity: 0.8;
 }
 
-/* Card-specific gradients */
 .card-hosted .tool-tags-container::after {
   background: linear-gradient(to right, transparent 0%, var(--color-hosted-bg) 70%);
 }
@@ -514,7 +1031,10 @@ input[type="checkbox"] {
   width: 100%;
 }
 
-/* Matrix Components - Consolidated */
+/* ===================================================================
+   13. MATRIX SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .matrix-wrapper {
   overflow-x: auto;
   margin: 1rem 0;
@@ -575,7 +1095,7 @@ input[type="checkbox"] {
   vertical-align: top;
 }
 
-/* Matrix highlighting - Consolidated */
+/* Matrix Highlighting */
 .matrix-table tr.highlight-row th,
 .matrix-table tr.highlight-row td,
 .matrix-table th.highlight-column,
@@ -591,7 +1111,6 @@ input[type="checkbox"] {
   box-shadow: inset 0 0 0 1px rgb(37 99 235 / 30%);
 }
 
-/* Dark theme matrix adjustments */
 [data-theme="dark"] .matrix-table tr.highlight-row th,
 [data-theme="dark"] .matrix-table tr.highlight-row td,
 [data-theme="dark"] .matrix-table th.highlight-column,
@@ -607,7 +1126,7 @@ input[type="checkbox"] {
   box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%);
 }
 
-/* Tool Chips - Consolidated */
+/* Tool Chips */
 .tool-chip {
   display: inline-block;
   padding: 0.25rem 0.5rem;
@@ -639,40 +1158,10 @@ input[type="checkbox"] {
   color: white;
 }
 
-/* Consolidated Badge System */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.125rem 0.5rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-left: 0.5rem;
-}
+/* ===================================================================
+   14. MODAL SYSTEM (CONSOLIDATED)
+   ================================================================= */
 
-.badge--mini {
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.625rem;
-}
-
-.badge-primary { background-color: var(--color-primary); color: white; }
-.badge-secondary { background-color: var(--color-bg-secondary); color: var(--color-text); border: 1px solid var(--color-border); }
-.badge-success { background-color: var(--color-accent); color: white; }
-.badge-accent { background-color: var(--color-accent); color: white; }
-.badge-warning { background-color: var(--color-warning); color: white; }
-.badge-error { background-color: var(--color-error); color: white; }
-
-/* Tags */
-.tag {
-  display: inline-block;
-  padding: 0.125rem 0.5rem;
-  background-color: var(--color-bg-secondary);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  margin: 0.125rem;
-}
-
-/* Tool Details Modal - Consolidated */
 .tool-details {
   display: none;
   position: fixed;
@@ -692,7 +1181,9 @@ input[type="checkbox"] {
   transition: var(--transition-medium);
 }
 
-.tool-details.active { display: block; }
+.tool-details.active { 
+  display: block; 
+}
 
 .modal-overlay {
   display: none;
@@ -706,9 +1197,11 @@ input[type="checkbox"] {
   z-index: 999;
 }
 
-.modal-overlay.active { display: block; }
+.modal-overlay.active { 
+  display: block; 
+}
 
-/* Side-by-side modal positioning */
+/* Side-by-side modals */
 .modals-side-by-side #tool-details-primary.active {
   left: 25%;
   transform: translate(-50%, -50%);
@@ -723,7 +1216,10 @@ input[type="checkbox"] {
   width: 45vw;
 }
 
-/* Phase Controls - Consolidated */
+/* ===================================================================
+   15. FILTER AND PHASE CONTROLS (CONSOLIDATED)
+   ================================================================= */
+
 .domain-phase-container {
   display: grid;
   grid-template-columns: 1fr 2fr;
@@ -769,7 +1265,7 @@ input[type="checkbox"] {
   border-color: var(--color-primary-hover);
 }
 
-/* Tag Cloud - Consolidated */
+/* Tag Cloud */
 .tag-header {
   display: flex;
   align-items: center;
@@ -788,7 +1284,9 @@ input[type="checkbox"] {
   position: relative;
 }
 
-.tag-cloud.expanded { max-height: 1000px; }
+.tag-cloud.expanded { 
+  max-height: 1000px; 
+}
 
 .tag-cloud::after {
   content: '';
@@ -803,7 +1301,9 @@ input[type="checkbox"] {
   transition: var(--transition-medium);
 }
 
-.tag-cloud.expanded::after { opacity: 0; }
+.tag-cloud.expanded::after { 
+  opacity: 0; 
+}
 
 .tag-cloud-item {
   display: inline-flex;
@@ -820,7 +1320,9 @@ input[type="checkbox"] {
   user-select: none;
 }
 
-.tag-cloud-item.hidden { display: none; }
+.tag-cloud-item.hidden { 
+  display: none; 
+}
 
 .tag-cloud-item:hover {
   border-color: var(--color-primary);
@@ -861,119 +1363,29 @@ input[type="checkbox"] {
   transform: translateY(-1px);
 }
 
-/* Loading states */
-.btn.loading {
-  opacity: 0.7;
-  pointer-events: none;
-  position: relative;
-}
-
-.btn.loading::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 16px;
-  height: 16px;
-  margin: -8px 0 0 -8px;
-  border: 2px solid transparent;
-  border-top: 2px solid currentColor;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-/* Collaboration Tools - Consolidated */
-.collaboration-tools-compact {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  flex-direction: row;
-}
-
-.collaboration-tool-compact {
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 0.375rem;
-  padding: 0.75rem;
-  min-width: 200px;
-  max-width: 300px;
-  flex: 1;
-  cursor: pointer;
+/* View Toggle */
+.view-toggle {
   transition: var(--transition-fast);
 }
 
-.collaboration-tool-compact:hover {
+.view-toggle.active {
+  background-color: var(--color-primary);
+  color: white;
   border-color: var(--color-primary);
-  box-shadow: var(--shadow-sm);
 }
 
-.collaboration-tool-compact.hosted {
-  background-color: var(--color-hosted-bg);
-  border-color: var(--color-hosted);
-}
+/* ===================================================================
+   16. AI INTERFACE (CONSOLIDATED)
+   ================================================================= */
 
-.collaboration-tool-compact.oss {
-  background-color: var(--color-oss-bg);
-  border-color: var(--color-oss);
-}
-
-.collaboration-tool-compact .text-muted {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.3;
-  max-height: calc(1.3em * 3);
-  font-size: 0.75rem;
-  margin: 0.25rem 0;
-  word-break: break-word;
-}
-
-.collaboration-expand-icon {
-  transition: var(--transition-medium);
-  color: var(--color-text-secondary);
-}
-
-.collaboration-expand-icon svg { 
-  transition: var(--transition-medium); 
-}
-
-.collaboration-section-expanded .collaboration-expand-icon svg {
-  transform: rotate(180deg);
-}
-
-.collaboration-content {
-  animation: slideDown 0.3s ease-out;
-}
-
-.tool-compact-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  margin-bottom: 0.5rem;
-}
-
-.tool-count {
-  background: var(--color-bg-tertiary);
-  padding: 0.25rem 0.75rem;
-  border-radius: 1rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-}
-
-/* AI Interface - Consolidated */
 .ai-interface {
   padding: 2rem 0;
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.ai-query-section { margin-bottom: 3rem; }
-
-.ai-input-container textarea {
-  transition: var(--transition-fast);
+.ai-query-section { 
+  margin-bottom: 3rem; 
 }
 
 .ai-input-layout {
@@ -993,6 +1405,10 @@ input[type="checkbox"] {
   min-height: 120px;
 }
 
+.ai-input-container textarea {
+  transition: var(--transition-fast);
+}
+
 .ai-input-container textarea:focus {
   outline: none;
   border-color: var(--color-primary);
@@ -1004,6 +1420,15 @@ input[type="checkbox"] {
 }
 
 .ai-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: var(--color-bg-secondary);
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-border);
   user-select: none;
 }
 
@@ -1012,6 +1437,7 @@ input[type="checkbox"] {
   align-items: center;
   font-size: 0.875rem;
   transition: var(--transition-fast);
+  cursor: pointer;
 }
 
 .toggle-label:hover {
@@ -1024,6 +1450,10 @@ input[type="checkbox"] {
 
 .toggle-switch {
   position: relative;
+  width: 50px;
+  height: 24px;
+  background-color: var(--color-primary);
+  border-radius: 12px;
   cursor: pointer;
   transition: var(--transition-fast);
 }
@@ -1033,28 +1463,50 @@ input[type="checkbox"] {
 }
 
 .toggle-slider {
-  box-shadow: var(--shadow-sm);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border-radius: 50%;
   transition: var(--transition-fast);
+  transform: translateX(0);
+  box-shadow: var(--shadow-sm);
 }
 
 [data-theme="dark"] .toggle-slider {
   box-shadow: 0 2px 4px 0 rgb(255 255 255 / 10%);
 }
 
-/* Focus states for accessibility - Consolidated */
-.toggle-switch:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-  border-radius: 12px;
+/* Enhanced contextual analysis cards */
+.contextual-analysis-card {
+  margin-bottom: 2rem;
+  border-left: 4px solid;
+  transition: var(--transition-fast);
 }
 
-.toggle-label:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
+.contextual-analysis-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
 }
 
-/* Workflow Components - Consolidated */
+.contextual-analysis-card.scenario {
+  border-left-color: var(--color-primary);
+}
+
+.contextual-analysis-card.approach {
+  border-left-color: var(--color-accent);
+}
+
+.contextual-analysis-card.critical {
+  border-left-color: var(--color-warning);
+}
+
+/* ===================================================================
+   17. WORKFLOW SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .workflow-container {
   display: flex;
   flex-direction: column;
@@ -1092,7 +1544,10 @@ input[type="checkbox"] {
   margin: 0 auto 0.75rem;
 }
 
-.phase-info { flex: 1; min-width: 0; }
+.phase-info { 
+  flex: 1; 
+  min-width: 0; 
+}
 
 .phase-title {
   font-weight: 600;
@@ -1151,7 +1606,7 @@ input[type="checkbox"] {
   margin: 0.5rem 0;
 }
 
-/* Tool Recommendations - Consolidated */
+/* Tool Recommendations */
 .tool-recommendation {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
@@ -1234,1401 +1689,10 @@ input[type="checkbox"] {
   color: var(--color-text-secondary);
 }
 
-/* Tool Results - Consolidated */
-.tool-results-container {
-  max-width: 1000px;
-  margin: 0 auto;
-}
+/* ===================================================================
+   18. APPROACH SELECTION (CONSOLIDATED)
+   ================================================================= */
 
-.tool-recommendations-grid {
-  display: grid;
-  gap: 1.5rem;
-}
-
-.tool-detailed-recommendation {
-  position: relative;
-  transition: var(--transition-fast);
-  border: 2px solid transparent;
-  animation: fadeInUp 0.5s ease-out;
-}
-
-.tool-detailed-recommendation:nth-child(2) { animation-delay: 0.1s; }
-.tool-detailed-recommendation:nth-child(3) { animation-delay: 0.2s; }
-
-.tool-detailed-recommendation:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-  border-color: var(--color-primary);
-}
-
-.tool-detailed-recommendation.card-hosted {
-  background-color: var(--color-hosted-bg);
-  border-color: var(--color-hosted);
-}
-
-.tool-detailed-recommendation.card-hosted:hover {
-  border-color: var(--color-hosted);
-  box-shadow: 0 0 0 1px var(--color-hosted), var(--shadow-lg);
-}
-
-.tool-detailed-recommendation.card-oss {
-  background-color: var(--color-oss-bg);
-  border-color: var(--color-oss);
-}
-
-.tool-detailed-recommendation.card-method {
-  background-color: var(--color-method-bg);
-  border-color: var(--color-method);
-}
-
-.tool-detailed-recommendation.card-method:hover {
-  border-color: var(--color-method);
-  box-shadow: 0 0 0 1px var(--color-method), var(--shadow-lg);
-}
-
-.tool-rank-badge {
-  animation: fadeInUp 0.6s ease-out;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  font-weight: 700;
-}
-
-[data-theme="dark"] .tool-rank-badge {
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 50%);
-}
-
-.tool-detailed-explanation h4 {
-  display: flex;
-  align-items: center;
-  font-size: 1rem;
-  margin-bottom: 0.75rem;
-}
-
-/* Pros/Cons - Consolidated */
-.pros-cons-section {
-  animation: fadeIn 0.4s ease-in;
-}
-
-.pros, .cons {
-  font-size: 0.875rem;
-}
-
-.pros ul, .cons ul {
-  list-style-type: none;
-  padding-left: 0;
-}
-
-.pros li, .cons li {
-  position: relative;
-  padding-left: 1.5rem;
-  margin-bottom: 0.375rem;
-  line-height: 1.4;
-}
-
-.pros li::before {
-  content: '✓';
-  position: absolute;
-  left: 0;
-  color: var(--color-accent);
-  font-weight: bold;
-}
-
-.cons li::before {
-  content: '⚠';
-  position: absolute;
-  left: 0;
-  color: var(--color-warning);
-  font-weight: bold;
-}
-
-.tool-metadata {
-  background-color: var(--color-bg-secondary);
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border-left: 3px solid var(--color-primary);
-}
-
-.alternatives {
-  border-left: 3px solid var(--color-text-secondary);
-}
-
-/* Knowledgebase - Consolidated */
-.kb-entry {
-  margin-bottom: 1rem;
-  transition: var(--transition-fast);
-  position: relative;
-  cursor: pointer;
-}
-
-.kb-entry:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.kb-entry:target {
-  animation: highlight-flash 2s ease-out;
-}
-
-.kb-content { line-height: 1.7; }
-
-/* Footer */
-footer {
-  margin-top: auto;
-  background-color: var(--color-bg-secondary);
-  border-top: 1px solid var(--color-border);
-  padding: 2rem 0;
-}
-
-.footer-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-/* Utility Classes - Systematic Generation */
-.text-muted { color: var(--color-text-secondary); }
-.leading-tight { line-height: 1.25; }
-.leading-relaxed { line-height: 1.625; }
-
-/* Layout utilities */
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-1 { flex: 1; }
-.flex-shrink-0 { flex-shrink: 0; }
-.flex-shrink-1 { flex-shrink: 1; }
-.items-center { align-items: center; }
-.items-start { align-items: flex-start; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.text-center { text-align: center; }
-
-.grid { display: grid; }
-.gap-1 { gap: 0.25rem; }
-.gap-2 { gap: 0.5rem; }
-.gap-3 { gap: 0.75rem; }
-.gap-4 { gap: 1rem; }
-
-/* Spacing utilities - systematic */
-.mb-2 { margin-bottom: 0.5rem; }
-.mb-3 { margin-bottom: 0.75rem; }
-.mb-4 { margin-bottom: 1rem; }
-.mb-6 { margin-bottom: 1.5rem; }
-.mb-8 { margin-bottom: 2rem; }
-.mt-auto { margin-top: auto; }
-.mr-2 { margin-right: 0.5rem; }
-.mr-3 { margin-right: 0.75rem; }
-
-.p-8 { padding: 2rem; }
-.pt-3 { padding-top: 0.75rem; }
-
-/* Size utilities */
-.w-full { width: 100%; }
-.max-w-lg { max-width: 32rem; }
-.max-w-6xl { max-width: 72rem; }
-.min-w-0 { min-width: 0; }
-
-/* Position utilities */
-.fixed { position: fixed; }
-.relative { position: relative; }
-.bottom-8 { bottom: 2rem; }
-.right-8 { right: 2rem; }
-.z-50 { z-index: 50; }
-
-/* Text utilities */
-.text-xs { font-size: 0.75rem; }
-.text-sm { font-size: 0.875rem; }
-.text-lg { font-size: 1.125rem; }
-.text-2xl { font-size: 1.5rem; }
-.font-semibold { font-weight: 600; }
-
-/* Visual utilities */
-.rounded-lg { border-radius: 0.75rem; }
-.border { border: 1px solid var(--color-border); }
-.cursor-pointer { cursor: pointer; }
-.overflow-hidden { overflow: hidden; }
-
-/* Color utilities */
-.bg-secondary { background-color: var(--color-bg-secondary); }
-.text-primary { color: var(--color-primary); }
-.text-secondary { color: var(--color-text-secondary); }
-
-/* Knowledgebase specific */
-#kb-entries {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-}
-
-/* FAB button */
-.fab-button {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.fab-button:hover {
-  transform: scale(1.1);
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
-}
-
-[data-theme="dark"] .fab-button {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-}
-
-[data-theme="dark"] .fab-button:hover {
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
-}
-
-/* Markdown content */
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
-.markdown-content h4,
-.markdown-content h5,
-.markdown-content h6 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-.markdown-content h1:first-child,
-.markdown-content h2:first-child,
-.markdown-content h3:first-child {
-  margin-top: 0;
-}
-
-.markdown-content p {
-  margin-bottom: 1rem;
-}
-
-.markdown-content ul,
-.markdown-content ol {
-  margin-bottom: 1rem;
-  padding-left: 1.5rem;
-}
-
-.markdown-content li {
-  margin-bottom: 0.5rem;
-}
-
-.markdown-content pre {
-  background-color: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1.5rem 0;
-  overflow-x: auto;
-  font-size: 0.875rem;
-}
-
-.markdown-content code:not(pre code) {
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.875rem;
-}
-
-.markdown-content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.5rem 0;
-  background-color: var(--color-bg);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-}
-
-.markdown-content th,
-.markdown-content td {
-  padding: 0.75rem;
-  text-align: left;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.markdown-content th {
-  background-color: var(--color-bg-secondary);
-  font-weight: 600;
-}
-
-.markdown-content blockquote {
-  border-left: 4px solid var(--color-primary);
-  background-color: var(--color-bg-secondary);
-  padding: 1rem 1.5rem;
-  margin: 1.5rem 0;
-  border-radius: 0 0.5rem 0.5rem 0;
-}
-
-.markdown-content hr {
-  border: none;
-  border-top: 1px solid var(--color-border);
-  margin: 2rem 0;
-}
-
-/* Share Button Styles */
-.share-btn {
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  transition: var(--transition-fast);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.share-btn:hover {
-  color: var(--color-primary);
-  background-color: var(--color-bg-secondary);
-}
-
-.share-btn--small {
-  padding: 0.125rem;
-}
-
-.share-btn--medium {
-  padding: 0.375rem;
-}
-
-.share-btn svg {
-  flex-shrink: 0;
-}
-
-/* Form styling */
-.form-section {
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 1.5rem;
-  background-color: var(--color-bg);
-}
-
-.form-section h3 {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  color: var(--color-primary);
-  font-size: 1.125rem;
-}
-
-.form-grid {
-  display: grid;
-  gap: 1rem;
-}
-
-.form-grid.two-columns {
-  grid-template-columns: 1fr 1fr;
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-/* Animations - Consolidated */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    max-height: 0;
-    padding-top: 0;
-    margin-top: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    max-height: 1000px;
-    padding-top: 1rem;
-    margin-top: 1rem;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.05);
-    opacity: 0.8;
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes highlight-flash {
-  0% { 
-    background-color: rgb(57 255 20 / 60%);
-    box-shadow: 0 0 0 8px rgb(255 20 147 / 50%), 0 0 20px rgb(57 255 20 / 80%);
-    transform: scale(1.12) rotate(2deg);
-    border: 3px solid rgb(255 255 0);
-  }
-  12.5% { 
-    background-color: rgb(255 20 147 / 70%);
-    box-shadow: 0 0 0 15px rgb(0 191 255 / 60%), 0 0 30px rgb(255 20 147 / 90%);
-    transform: scale(1.18) rotate(-3deg);
-    border: 3px solid rgb(57 255 20);
-  }
-  25% { 
-    background-color: rgb(0 191 255 / 65%);
-    box-shadow: 0 0 0 12px rgb(191 0 255 / 55%), 0 0 25px rgb(0 191 255 / 85%);
-    transform: scale(1.15) rotate(1deg);
-    border: 3px solid rgb(255 20 147);
-  }
-  37.5% { 
-    background-color: rgb(191 0 255 / 75%);
-    box-shadow: 0 0 0 18px rgb(255 255 0 / 65%), 0 0 35px rgb(191 0 255 / 95%);
-    transform: scale(1.20) rotate(-2deg);
-    border: 3px solid rgb(0 191 255);
-  }
-  50% { 
-    background-color: rgb(255 255 0 / 80%);
-    box-shadow: 0 0 0 10px rgb(57 255 20 / 70%), 0 0 40px rgb(255 255 0 / 100%);
-    transform: scale(1.16) rotate(3deg);
-    border: 3px solid rgb(191 0 255);
-  }
-  62.5% { 
-    background-color: rgb(255 69 0 / 70%);
-    box-shadow: 0 0 0 16px rgb(255 20 147 / 60%), 0 0 30px rgb(255 69 0 / 90%);
-    transform: scale(1.22) rotate(-1deg);
-    border: 3px solid rgb(255 255 0);
-  }
-  75% { 
-    background-color: rgb(255 20 147 / 65%);
-    box-shadow: 0 0 0 14px rgb(0 191 255 / 50%), 0 0 45px rgb(255 20 147 / 85%);
-    transform: scale(1.14) rotate(2deg);
-    border: 3px solid rgb(57 255 20);
-  }
-  87.5% { 
-    background-color: rgb(57 255 20 / 75%);
-    box-shadow: 0 0 0 20px rgb(191 0 255 / 65%), 0 0 35px rgb(57 255 20 / 95%);
-    transform: scale(1.25) rotate(-3deg);
-    border: 3px solid rgb(255 69 0);
-  }
-  100% { 
-    background-color: transparent;
-    box-shadow: none;
-    transform: scale(1) rotate(0deg);
-    border: none;
-  }
-}
-
-/* Highlight animation triggers */
-.tool-card.highlight-flash,
-.tool-chip.highlight-flash,
-.tool-recommendation.highlight-flash {
-  animation: highlight-flash 2s ease-out;
-}
-
-/* Responsive Design - Consolidated Media Queries */
-@media (width >= 768px) {
-  #kb-entries {
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-    gap: 1.5rem;
-  }
-}
-
-@media (width >= 1200px) {
-  #kb-entries {
-    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
-    gap: 2rem;
-  }
-  
-  .modals-side-by-side #tool-details-primary.active,
-  .modals-side-by-side #tool-details-secondary.active {
-    max-width: 45vw;
-    width: 45vw;
-  }
-}
-
-@media (width <= 1200px) {
-  .modals-side-by-side #tool-details-primary.active,
-  .modals-side-by-side #tool-details-secondary.active {
-    max-width: 42vw;
-    width: 42vw;
-  }
-}
-
-@media (width <= 768px) {
-  .nav-wrapper { padding: 0.75rem; }
-  .nav-links { gap: 1rem; }
-  .nav-link { font-size: 0.875rem; }
-  
-  h1 { font-size: 2rem; }
-  h2 { font-size: 1.5rem; }
-  
-  .footer-content {
-    flex-direction: column;
-    text-align: center;
-  }
-  
-  .domain-phase-container {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-  
-  .phase-buttons { gap: 0.375rem; }
-  .phase-button {
-    padding: 0.375rem 0.75rem;
-    font-size: 0.8125rem;
-  }
-  
-  .tag-cloud { max-height: 100px; }
-  .tag-header { gap: 0.75rem; }
-  
-  .matrix-table { min-width: 600px; }
-  .matrix-table th:first-child,
-  .matrix-table td:first-child {
-    width: 140px;
-    min-width: 140px;
-    max-width: 140px;
-  }
-  .matrix-table th:not(:first-child),
-  .matrix-table td:not(:first-child) {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-  }
-  .matrix-cell {
-    width: 120px;
-    min-width: 120px;
-    max-width: 120px;
-    min-height: 50px;
-  }
-  
-  .modals-side-by-side #tool-details-primary.active {
-    top: 25%;
-    left: 50%;
-    max-width: 90vw;
-    width: 90vw;
-    max-height: 35vh;
-  }
-  
-  .modals-side-by-side #tool-details-secondary.active {
-    top: 75%;
-    left: 50%;
-    max-width: 90vw;
-    width: 90vw;
-    max-height: 35vh;
-  }
-  
-  .tool-details {
-    max-height: 80vh; 
-    padding: 1.5rem; 
-    width: 95%; 
-    max-width: none;
-  }
-
-  .form-grid.two-columns {
-    grid-template-columns: 1fr;
-  }
-  .hint-card {
-    padding: 1rem;
-  }
-  
-  .hint-description {
-    font-size: 0.6875rem;
-  }
-  
-  .hint-trigger {
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  .ai-input-layout {
-    gap: 0.75rem;
-    flex-direction: column;
-  }
-  .ai-suggestions-section {
-    flex: 0 0 auto;
-    width: 100%;
-    max-width: none;
-  }
-  .ai-textarea-section {
-    flex: 1;
-    min-width: 0;
-    width: 100%;
-    min-height: 100px;
-  }
-  .approach-hero { 
-    padding: 2rem 1rem; 
-    margin: 1rem 0;
-  }
-  
-  .approach-content h1 { 
-    font-size: 2rem; 
-  }
-  
-  .hero-tagline {
-    font-size: 1.125rem;
-  }
-  
-  .approach-selector { 
-    grid-template-columns: 1fr; 
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-  }
-  
-  .approach-card { 
-    padding: 1.5rem; 
-  }
-  
-  .approach-header {
-    gap: 0.75rem;
-  }
-  
-  .approach-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-    font-size: 1.25rem;
-  }
-  
-  .approach-card h3 {
-    font-size: 1.25rem;
-  }
-  
-  .quick-actions {
-    gap: 0.75rem;
-  }
-  
-  .quick-actions .btn {
-    padding: 0.625rem 1.25rem;
-    font-size: 0.8125rem;
-  }
-  .nist-workflow { 
-    grid-template-columns: 1fr 1fr; 
-    gap: 0.75rem;
-  }
-  .search-suggestions {
-    gap: 0.5rem;
-  }
-  
-  .suggestion-chip {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8125rem;
-  }
-  
-  .scenario-emoji {
-    font-size: 1rem;
-  }
-  
-  .targeted-search-input {
-    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
-  }
-  
-  .search-icon {
-    left: 0.875rem;
-  }
-}
-
-@media (width <= 640px) {
-  .phase-buttons { justify-content: center; }
-  .phase-button {
-    flex: 1;
-    min-width: 0;
-    text-align: center;
-  }
-  
-  .tag-cloud { max-height: 80px; }
-  .tag-cloud.expanded { max-height: 800px; }
-  
-  .nav-wrapper {
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0.75rem;
-  }
-  
-  .nav-links {
-    gap: 0.75rem;
-    justify-content: center;
-    width: 100%;
-  }
-  
-  .nav-link {
-    font-size: 0.8125rem;
-    padding: 0.25rem 0.5rem;
-  }
-
-  .ai-mode-toggle {
-    flex-direction: column;
-    gap: 0.75rem;
-    text-align: center;
-  }
-  
-  .toggle-label {
-    font-size: 0.8125rem;
-  }
-  
-  .toggle-switch {
-    align-self: center;
-  }
-  
-  .pros-cons-section {
-    grid-template-columns: 1fr;
-  }
-  
-  .card {
-    padding: 1rem;
-  }
-  
-  .form-grid {
-    gap: 0.75rem;
-  }
-  
-  .kb-entry {
-    padding: 1rem;
-  }
-  
-  .kb-entry .flex-between {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-  
-  .kb-entry .flex-shrink-0 {
-    align-self: stretch;
-  }
-  
-  .kb-entry .flex-shrink-0 .flex {
-    justify-content: space-between;
-    width: 100%;
-  }
-  
-  .btn-sm {
-    padding: 0.5rem 1rem;
-    flex: 1;
-  }
-  .search-suggestions {
-    justify-content: center;
-  }
-  
-  .suggestion-chip {
-    flex: 1;
-    min-width: 0;
-    max-width: calc(50% - 0.25rem);
-    justify-content: center;
-  }
-  
-  .targeted-section {
-    padding: 1.5rem;
-  }
-}
-
-@media (width <= 480px) {
-  .phase-buttons {
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-  
-  .phase-button { width: 100%; }
-  
-  .phase-tools { grid-template-columns: 1fr; }
-  
-  .collaboration-tools-compact { 
-    flex-direction: column; 
-  }
-  .collaboration-tool-compact { 
-    min-width: auto; 
-    max-width: none; 
-  }
-  
-  .nav-wrapper { gap: 0.75rem; }
-  .nav-links {
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  .nav-link {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.375rem;
-  }
-  
-  .tool-details {
-    max-height: 75vh; 
-    padding: 1rem; 
-    border-radius: 0.25rem; 
-  }
-  
-  .kb-entry .badge {
-    font-size: 0.625rem;
-    padding: 0.125rem 0.375rem;
-  }
-  
-  .kb-entry .text-lg {
-    font-size: 1rem;
-  }
-  
-  .kb-entry .flex.gap-4 {
-    gap: 0.75rem;
-  }
-  
-  .kb-entry .flex.gap-2 {
-    gap: 0.5rem;
-  }
-
-  
-  .prompting-card {
-    padding: 0.75rem;
-  }
-  
-  .suggestion-item {
-    padding: 0.375rem 0.5rem;
-    font-size: 0.75rem;
-  }
-  
-  .position-badge {
-    width: 28px;
-    height: 28px;
-    font-size: 0.875rem;
-  }
-  
-  .queue-status-card {
-    padding: 1rem;
-  }
-  .hint-card {
-    padding: 0.75rem;
-  }
-  
-  .hint-title {
-    font-size: 0.8125rem;
-  }
-  
-  .hint-description {
-    font-size: 0.625rem;
-  }
-  .approach-info {
-    padding: 0.75rem;
-    font-size: 0.8125rem;
-  }
-  
-  .quick-actions {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .quick-actions .btn {
-    width: 100%;
-    max-width: 280px;
-  }
-  .nist-workflow { 
-  grid-template-columns: 1fr; 
-  }
-}
-
-/* Smart Prompting Styles - Simplified */
-.smart-prompting-container {
-  height: 100%;
-  animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.prompting-card {
-  background-color: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  height: 100%;
-  min-height: 120px;
-  display: flex;
-  flex-direction: column;
-  opacity: 0.85;
-  transition: var(--transition-fast);
-}
-
-.prompting-card:hover {
-  opacity: 1;
-  border-color: var(--color-accent);
-}
-
-.prompting-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.status-icon {
-  font-size: 1rem;
-  flex-shrink: 0;
-}
-
-.status-text {
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--color-text);
-  flex: 1;
-}
-
-.prompting-spinner {
-  flex-shrink: 0;
-  animation: spin 1s linear infinite;
-}
-
-/* Smart Prompting Hint */
-.smart-prompting-hint {
-  height: 100%;
-  min-height: 120px;
-  display: flex;
-  align-items: center;
-  animation: hintFadeIn 0.3s ease-in-out;
-}
-
-.hint-card {
-  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
-  border: 1px dashed var(--color-border);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
-  width: 100%;
-  text-align: center;
-  opacity: 0.7;
-  transition: var(--transition-medium);
-}
-
-.hint-card:hover {
-  opacity: 0.9;
-  border-color: var(--color-accent);
-  transform: translateY(-1px);
-}
-
-.hint-icon {
-  margin-bottom: 0.75rem;
-  opacity: 0.8;
-}
-
-.hint-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.hint-title {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text);
-  letter-spacing: 0.025em;
-}
-
-.hint-description {
-  margin: 0;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  color: var(--color-text-secondary);
-}
-
-.hint-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 0.25rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--color-border);
-}
-
-.hint-label {
-  font-size: 0.6875rem;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 500;
-}
-
-.hint-value {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-accent);
-  background-color: var(--color-bg);
-  padding: 0.125rem 0.5rem;
-  border-radius: 1rem;
-  border: 1px solid var(--color-accent);
-}
-
-/* Hide hint when smart prompting is active */
-.smart-prompting-container[style*="block"] ~ .smart-prompting-hint,
-.smart-prompting-container:not([style*="none"]) ~ .smart-prompting-hint {
-  display: none;
-}
-
-@keyframes hintFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 0.7;
-    transform: translateY(0);
-  }
-}
-
-.suggested-questions {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.suggestions-header {
-  margin-bottom: 0.75rem;
-}
-
-.suggestions-label {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.questions-list {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.suggestion-item {
-  background-color: var(--color-bg);
-  border: 1px solid transparent;
-  border-radius: 0.375rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  color: var(--color-text-secondary);
-  border-left: 2px solid var(--color-accent);
-  transition: var(--transition-fast);
-  position: relative;
-}
-
-.suggestion-item::before {
-  content: counter(suggestion-counter);
-  counter-increment: suggestion-counter;
-  position: absolute;
-  left: -8px;
-  top: -6px;
-  background-color: var(--color-accent);
-  color: white;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.625rem;
-  font-weight: 600;
-}
-.questions-list {
-  counter-reset: suggestion-counter;
-}
-
-.suggestion-number {
-  color: var(--color-accent);
-  font-weight: 600;
-  margin-right: 0.5rem;
-}
-
-.suggestion-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: 2rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  user-select: none;
-}
-
-.suggestion-chip:hover {
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
-  color: white;
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.suggestion-chip.active {
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
-  color: white;
-}
-
-.scenario-emoji {
-  font-size: 1.125rem;
-}
-
-.scenario-text {
-  font-weight: 500;
-}
-
-.more-scenarios {
-  text-align: center;
-  margin-top: 1rem;
-}
-
-.btn-more-scenarios {
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: 1rem;
-  padding: 0.5rem 1rem;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  font-size: 0.8125rem;
-  transition: var(--transition-fast);
-}
-
-.btn-more-scenarios:hover {
-  background-color: var(--color-bg-secondary);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.targeted-tip {
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  text-align: center;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.targeted-tip p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.dismiss-button {
-  align-self: flex-end;
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  transition: var(--transition-fast);
-  opacity: 0.7;
-}
-
-.dismiss-button:hover {
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text);
-  opacity: 1;
-}
-
-/* Queue Status - Improved Design */
-.queue-status-card {
-  max-width: 400px;
-  margin: 1.5rem auto 0;
-  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  padding: 1.25rem;
-  box-shadow: var(--shadow-sm);
-}
-
-.queue-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-}
-
-.queue-position-display {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.position-badge {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 1rem;
-  box-shadow: var(--shadow-sm);
-}
-
-.position-label {
-  font-weight: 600;
-  color: var(--color-text);
-  font-size: 0.9375rem;
-}
-
-.queue-details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-}
-
-.queue-stat {
-  text-align: center;
-  padding: 0.75rem;
-  background-color: var(--color-bg);
-  border-radius: 0.5rem;
-  border: 1px solid var(--color-border);
-}
-
-.stat-label {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  margin-bottom: 0.25rem;
-  font-weight: 500;
-}
-
-.stat-value {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--color-primary);
-}
-
-.stat-unit {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  margin-left: 0.25rem;
-}
-
-.queue-progress-container {
-  position: relative;
-}
-
-.queue-progress-track {
-  background-color: var(--color-bg);
-  border-radius: 8px;
-  height: 6px;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  margin-bottom: 0.75rem;
-}
-
-.queue-progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
-  width: 0%;
-  transition: width 0.3s ease;
-  border-radius: 8px;
-}
-
-.task-id-display {
-  text-align: center;
-  padding: 0.5rem;
-  background-color: var(--color-bg);
-  border-radius: 0.375rem;
-  border: 1px solid var(--color-border);
-}
-
-.task-label {
-  font-size: 0.6875rem;
-  color: var(--color-text-secondary);
-  margin-right: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  font-weight: 500;
-}
-
-.task-id {
-  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
-  font-size: 0.6875rem;
-  color: var(--color-text);
-  background-color: var(--color-bg-secondary);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--color-border);
-}
-
-@keyframes smartPromptSlideIn {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-    max-height: 0;
-  }
-  to {
-    opacity: 0.85;
-    transform: translateX(0);
-    max-height: 300px;
-  }
-}
-
-
-/* Enhanced contextual analysis cards */
-.contextual-analysis-card {
-  margin-bottom: 2rem;
-  border-left: 4px solid;
-  transition: var(--transition-fast);
-}
-
-.contextual-analysis-card:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.contextual-analysis-card.scenario {
-  border-left-color: var(--color-primary);
-}
-
-.contextual-analysis-card.approach {
-  border-left-color: var(--color-accent);
-}
-
-.contextual-analysis-card.critical {
-  border-left-color: var(--color-warning);
-}
-
-.analysis-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.analysis-header.scenario { color: var(--color-primary); }
-.analysis-header.approach { color: var(--color-accent); }
-.analysis-header.critical { color: var(--color-warning); }
-
-/* Methodology-First Approach Styles */
 .approach-hero {
   background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
   border-radius: 1rem;
@@ -2794,7 +1858,9 @@ footer {
   font-size: 0.875rem;
 }
 
-.methodology-section {
+/* Methodology and Targeted Sections */
+.methodology-section,
+.targeted-section {
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: 0.75rem;
@@ -2803,35 +1869,49 @@ footer {
   display: none;
 }
 
-.methodology-section.active { 
+.methodology-section.active,
+.targeted-section.active { 
   display: block; 
   animation: fadeInUp 0.5s ease-out;
 }
 
-.methodology-header {
+.methodology-header,
+.targeted-header {
   text-align: center;
   margin-bottom: 2rem;
 }
 
-.methodology-header h3 {
-  color: var(--color-primary);
+.methodology-header h3,
+.targeted-header h3 {
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
-.methodology-subtitle {
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
+.methodology-header h3 {
+  color: var(--color-primary);
 }
 
-.methodology-tip {
+.targeted-header h3 {
+  color: var(--color-accent);
+}
+
+.methodology-subtitle,
+.targeted-subtitle {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.methodology-tip,
+.targeted-tip {
   text-align: center;
   padding: 1.5rem;
   background: var(--color-bg-secondary);
   border-radius: 0.5rem;
 }
 
-.methodology-tip p {
+.methodology-tip p,
+.targeted-tip p {
   color: var(--color-text-secondary);
   margin: 0;
   font-size: 0.875rem;
@@ -2844,37 +1924,479 @@ footer {
   margin-bottom: 2rem;
 }
 
-.targeted-section {
-  background: var(--color-bg);
+/* ===================================================================
+   19. FOOTER
+   ================================================================= */
+
+footer {
+  margin-top: auto;
+  background-color: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border);
+  padding: 2rem 0;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+/* ===================================================================
+   20. ANIMATIONS
+   ================================================================= */
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    padding-top: 0;
+    margin-top: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    max-height: 1000px;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes highlight-flash {
+  0% { 
+    background-color: rgb(57 255 20 / 60%);
+    box-shadow: 0 0 0 8px rgb(255 20 147 / 50%), 0 0 20px rgb(57 255 20 / 80%);
+    transform: scale(1.12) rotate(2deg);
+    border: 3px solid rgb(255 255 0);
+  }
+  12.5% { 
+    background-color: rgb(255 20 147 / 70%);
+    box-shadow: 0 0 0 15px rgb(0 191 255 / 60%), 0 0 30px rgb(255 20 147 / 90%);
+    transform: scale(1.18) rotate(-3deg);
+    border: 3px solid rgb(57 255 20);
+  }
+  25% { 
+    background-color: rgb(0 191 255 / 65%);
+    box-shadow: 0 0 0 12px rgb(191 0 255 / 55%), 0 0 25px rgb(0 191 255 / 85%);
+    transform: scale(1.15) rotate(1deg);
+    border: 3px solid rgb(255 20 147);
+  }
+  37.5% { 
+    background-color: rgb(191 0 255 / 75%);
+    box-shadow: 0 0 0 18px rgb(255 255 0 / 65%), 0 0 35px rgb(191 0 255 / 95%);
+    transform: scale(1.20) rotate(-2deg);
+    border: 3px solid rgb(0 191 255);
+  }
+  50% { 
+    background-color: rgb(255 255 0 / 80%);
+    box-shadow: 0 0 0 10px rgb(57 255 20 / 70%), 0 0 40px rgb(255 255 0 / 100%);
+    transform: scale(1.16) rotate(3deg);
+    border: 3px solid rgb(191 0 255);
+  }
+  62.5% { 
+    background-color: rgb(255 69 0 / 70%);
+    box-shadow: 0 0 0 16px rgb(255 20 147 / 60%), 0 0 30px rgb(255 69 0 / 90%);
+    transform: scale(1.22) rotate(-1deg);
+    border: 3px solid rgb(255 255 0);
+  }
+  75% { 
+    background-color: rgb(255 20 147 / 65%);
+    box-shadow: 0 0 0 14px rgb(0 191 255 / 50%), 0 0 45px rgb(255 20 147 / 85%);
+    transform: scale(1.14) rotate(2deg);
+    border: 3px solid rgb(57 255 20);
+  }
+  87.5% { 
+    background-color: rgb(57 255 20 / 75%);
+    box-shadow: 0 0 0 20px rgb(191 0 255 / 65%), 0 0 35px rgb(57 255 20 / 95%);
+    transform: scale(1.25) rotate(-3deg);
+    border: 3px solid rgb(255 69 0);
+  }
+  100% { 
+    background-color: transparent;
+    box-shadow: none;
+    transform: scale(1) rotate(0deg);
+    border: none;
+  }
+}
+
+/* ===================================================================
+   21. SMART PROMPTING INTERFACE (MISSING STYLES ADDED BACK)
+   ================================================================= */
+
+/* Smart Prompting Container */
+.smart-prompting-container {
+  height: 100%;
+  animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.prompting-card {
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  opacity: 0.85;
+  transition: var(--transition-fast);
+}
+
+.prompting-card:hover {
+  opacity: 1;
+  border-color: var(--color-accent);
+}
+
+.prompting-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.status-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.status-text {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text);
+  flex: 1;
+}
+
+.prompting-spinner {
+  flex-shrink: 0;
+  animation: spin 1s linear infinite;
+}
+
+/* Smart Prompting Hint */
+.smart-prompting-hint {
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  animation: hintFadeIn 0.3s ease-in-out;
+}
+
+.hint-card {
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
+  border: 1px dashed var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  width: 100%;
+  text-align: center;
+  opacity: 0.7;
+  transition: var(--transition-medium);
+}
+
+.hint-card:hover {
+  opacity: 0.9;
+  border-color: var(--color-accent);
+  transform: translateY(-1px);
+}
+
+.hint-icon {
+  margin-bottom: 0.75rem;
+  opacity: 0.8;
+}
+
+.hint-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hint-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+  letter-spacing: 0.025em;
+}
+
+.hint-description {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary);
+}
+
+.hint-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.hint-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+}
+
+.hint-value {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-accent);
+  background-color: var(--color-bg);
+  padding: 0.125rem 0.5rem;
+  border-radius: 1rem;
+  border: 1px solid var(--color-accent);
+}
+
+.suggested-questions {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.suggestions-header {
+  margin-bottom: 0.75rem;
+}
+
+.suggestions-label {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.questions-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  counter-reset: suggestion-counter;
+}
+
+.suggestion-item {
+  background-color: var(--color-bg);
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--color-text-secondary);
+  border-left: 2px solid var(--color-accent);
+  transition: var(--transition-fast);
+  position: relative;
+}
+
+.suggestion-item::before {
+  content: counter(suggestion-counter);
+  counter-increment: suggestion-counter;
+  position: absolute;
+  left: -8px;
+  top: -6px;
+  background-color: var(--color-accent);
+  color: white;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  font-weight: 600;
+}
+
+.dismiss-button {
+  align-self: flex-end;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: var(--transition-fast);
+  opacity: 0.7;
+}
+
+.dismiss-button:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+/* ===================================================================
+   22. QUEUE STATUS INTERFACE (MISSING STYLES ADDED BACK)
+   ================================================================= */
+
+.queue-status-card {
+  max-width: 400px;
+  margin: 1.5rem auto 0;
+  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
   border: 1px solid var(--color-border);
   border-radius: 0.75rem;
-  padding: 2rem;
-  margin: 2rem 0;
-  display: none;
-  animation: fadeInUp 0.5s ease-out;
+  padding: 1.25rem;
+  box-shadow: var(--shadow-sm);
 }
 
-.targeted-section.active { 
-  display: block; 
+.queue-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
 }
 
-.targeted-header {
+.queue-position-display {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.position-badge {
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1rem;
+  box-shadow: var(--shadow-sm);
+}
+
+.position-label {
+  font-weight: 600;
+  color: var(--color-text);
+  font-size: 0.9375rem;
+}
+
+.queue-details {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.queue-stat {
   text-align: center;
-  margin-bottom: 2rem;
+  padding: 0.75rem;
+  background-color: var(--color-bg);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
 }
 
-.targeted-header h3 {
-  color: var(--color-accent);
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.targeted-subtitle {
+.stat-label {
+  display: block;
+  font-size: 0.75rem;
   color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  margin: 0;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
 }
 
+.stat-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.stat-unit {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-left: 0.25rem;
+}
+
+.queue-progress-container {
+  position: relative;
+}
+
+.queue-progress-track {
+  background-color: var(--color-bg);
+  border-radius: 8px;
+  height: 6px;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  margin-bottom: 0.75rem;
+}
+
+.queue-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  width: 0%;
+  transition: width 0.3s ease;
+  border-radius: 8px;
+}
+
+.task-id-display {
+  text-align: center;
+  padding: 0.5rem;
+  background-color: var(--color-bg);
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-border);
+}
+
+.task-label {
+  font-size: 0.6875rem;
+  color: var(--color-text-secondary);
+  margin-right: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  font-weight: 500;
+}
+
+.task-id {
+  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 0.6875rem;
+  color: var(--color-text);
+  background-color: var(--color-bg-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+}
+
+/* ===================================================================
+   23. SEARCH INTERFACE (MISSING STYLES ADDED BACK)
+   ================================================================= */
+
 .search-interface {
   max-width: 800px;
   margin: 0 auto 2rem;
@@ -2917,4 +2439,739 @@ footer {
   gap: 0.75rem;
   margin-bottom: 1rem;
   justify-content: center;
+}
+
+.suggestion-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 2rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+.suggestion-chip:hover {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.suggestion-chip.active {
+  background-color: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+}
+
+.scenario-emoji {
+  font-size: 1.125rem;
+}
+
+.scenario-text {
+  font-weight: 500;
+}
+
+.more-scenarios {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.btn-more-scenarios {
+  background: none;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  padding: 0.5rem 1rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  font-size: 0.8125rem;
+  transition: var(--transition-fast);
+}
+
+.btn-more-scenarios:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+/* ===================================================================
+   24. ANIMATION KEYFRAMES (MISSING ANIMATIONS)
+   ================================================================= */
+
+@keyframes smartPromptSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+    max-height: 0;
+  }
+  to {
+    opacity: 0.85;
+    transform: translateX(0);
+    max-height: 300px;
+  }
+}
+
+@keyframes hintFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 0.7;
+    transform: translateY(0);
+  }
+}
+
+/* ===================================================================
+   25. SPECIAL FEATURES (CONSOLIDATED)
+   ================================================================= */
+
+/* Knowledgebase */
+.kb-entry {
+  margin-bottom: 1rem;
+  transition: var(--transition-fast);
+  position: relative;
+  cursor: pointer;
+}
+
+.kb-entry:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.kb-entry:target {
+  animation: highlight-flash 2s ease-out;
+}
+
+.kb-content { 
+  line-height: 1.7; 
+}
+
+#kb-entries {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+/* FAB button */
+.fab-button {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.fab-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="dark"] .fab-button {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .fab-button:hover {
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
+}
+
+/* Share Button */
+.share-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-btn:hover {
+  color: var(--color-primary);
+  background-color: var(--color-bg-secondary);
+}
+
+.share-btn--small {
+  padding: 0.125rem;
+}
+
+.share-btn--medium {
+  padding: 0.375rem;
+}
+
+.share-btn svg {
+  flex-shrink: 0;
+}
+
+/* Collaboration Tools */
+.collaboration-tools-compact {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+.collaboration-tool-compact {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  min-width: 200px;
+  max-width: 300px;
+  flex: 1;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.collaboration-tool-compact:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.collaboration-tool-compact.hosted {
+  background-color: var(--color-hosted-bg);
+  border-color: var(--color-hosted);
+}
+
+.collaboration-tool-compact.oss {
+  background-color: var(--color-oss-bg);
+  border-color: var(--color-oss);
+}
+
+.collaboration-tool-compact .text-muted {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.3;
+  max-height: calc(1.3em * 3);
+  font-size: 0.75rem;
+  margin: 0.25rem 0;
+  word-break: break-word;
+}
+
+.collaboration-expand-icon {
+  transition: var(--transition-medium);
+  color: var(--color-text-secondary);
+}
+
+.collaboration-expand-icon svg { 
+  transition: var(--transition-medium); 
+}
+
+.collaboration-section-expanded .collaboration-expand-icon svg {
+  transform: rotate(180deg);
+}
+
+.collaboration-content {
+  animation: slideDown 0.3s ease-out;
+}
+
+.tool-compact-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 0.5rem;
+}
+
+.tool-count {
+  background: var(--color-bg-tertiary);
+  padding: 0.25rem 0.75rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+/* ===================================================================
+   22. RESPONSIVE DESIGN
+   ================================================================= */
+
+@media (width >= 768px) {
+  #kb-entries {
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 1.5rem;
+  }
+  
+  .form-grid-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (width >= 1200px) {
+  #kb-entries {
+    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
+    gap: 2rem;
+  }
+  
+  .modals-side-by-side #tool-details-primary.active,
+  .modals-side-by-side #tool-details-secondary.active {
+    max-width: 45vw;
+    width: 45vw;
+  }
+}
+
+@media (width <= 1200px) {
+  .modals-side-by-side #tool-details-primary.active,
+  .modals-side-by-side #tool-details-secondary.active {
+    max-width: 42vw;
+    width: 42vw;
+  }
+}
+
+@media (width <= 768px) {
+  .nav-wrapper { 
+    padding: 0.75rem; 
+  }
+  
+  .nav-links { 
+    gap: 1rem; 
+  }
+  
+  .nav-link { 
+    font-size: 0.875rem; 
+  }
+  
+  h1 { 
+    font-size: 2rem; 
+  }
+  
+  h2 { 
+    font-size: 1.5rem; 
+  }
+  
+  .footer-content {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .domain-phase-container {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .phase-buttons { 
+    gap: 0.375rem; 
+  }
+  
+  .phase-button {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+  
+  .tag-cloud { 
+    max-height: 100px; 
+  }
+  
+  .tag-header { 
+    gap: 0.75rem; 
+  }
+  
+  .matrix-table { 
+    min-width: 600px; 
+  }
+  
+  .matrix-table th:first-child,
+  .matrix-table td:first-child {
+    width: 140px;
+    min-width: 140px;
+    max-width: 140px;
+  }
+  
+  .matrix-table th:not(:first-child),
+  .matrix-table td:not(:first-child) {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+  }
+  
+  .matrix-cell {
+    width: 120px;
+    min-width: 120px;
+    max-width: 120px;
+    min-height: 50px;
+  }
+  
+  .modals-side-by-side #tool-details-primary.active {
+    top: 25%;
+    left: 50%;
+    max-width: 90vw;
+    width: 90vw;
+    max-height: 35vh;
+  }
+  
+  .modals-side-by-side #tool-details-secondary.active {
+    top: 75%;
+    left: 50%;
+    max-width: 90vw;
+    width: 90vw;
+    max-height: 35vh;
+  }
+  
+  .tool-details {
+    max-height: 80vh; 
+    padding: 1.5rem; 
+    width: 95%; 
+    max-width: none;
+  }
+
+  .form-grid-2 {
+    grid-template-columns: 1fr;
+  }
+  
+  .ai-input-layout {
+    gap: 0.75rem;
+    flex-direction: column;
+  }
+  
+  .ai-suggestions-section {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+  }
+  
+  .ai-textarea-section {
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    min-height: 100px;
+  }
+  
+  .approach-hero { 
+    padding: 2rem 1rem; 
+    margin: 1rem 0;
+  }
+  
+  .approach-content h1 { 
+    font-size: 2rem; 
+  }
+  
+  .hero-tagline {
+    font-size: 1.125rem;
+  }
+  
+  .approach-selector { 
+    grid-template-columns: 1fr; 
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .approach-card { 
+    padding: 1.5rem; 
+  }
+  
+  .approach-header {
+    gap: 0.75rem;
+  }
+  
+  .approach-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.25rem;
+  }
+  
+  .approach-card h3 {
+    font-size: 1.25rem;
+  }
+  
+  .quick-actions {
+    gap: 0.75rem;
+  }
+  
+  .quick-actions .btn {
+    padding: 0.625rem 1.25rem;
+    font-size: 0.8125rem;
+  }
+  
+  .nist-workflow { 
+    grid-template-columns: 1fr 1fr; 
+    gap: 0.75rem;
+  }
+  
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (width <= 640px) {
+  .phase-buttons { 
+    justify-content: center; 
+  }
+  
+  .phase-button {
+    flex: 1;
+    min-width: 0;
+    text-align: center;
+  }
+  
+  .tag-cloud { 
+    max-height: 80px; 
+  }
+  
+  .tag-cloud.expanded { 
+    max-height: 800px; 
+  }
+  
+  .nav-wrapper {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 0.75rem;
+  }
+  
+  .nav-links {
+    gap: 0.75rem;
+    justify-content: center;
+    width: 100%;
+  }
+  
+  .nav-link {
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  .ai-mode-toggle {
+    flex-direction: column;
+    gap: 0.75rem;
+    text-align: center;
+  }
+  
+  .toggle-label {
+    font-size: 0.8125rem;
+  }
+  
+  .toggle-switch {
+    align-self: center;
+  }
+  
+  .card {
+    padding: 1rem;
+  }
+  
+  .form-grid {
+    gap: 0.75rem;
+  }
+  
+  .kb-entry {
+    padding: 1rem;
+  }
+  
+  .btn-sm {
+    padding: 0.5rem 1rem;
+    flex: 1;
+  }
+}
+
+@media (width <= 480px) {
+  .phase-buttons {
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  
+  .phase-button { 
+    width: 100%; 
+  }
+  
+  .phase-tools { 
+    grid-template-columns: 1fr; 
+  }
+  
+  .collaboration-tools-compact { 
+    flex-direction: column; 
+  }
+  
+  .collaboration-tool-compact { 
+    min-width: auto; 
+    max-width: none; 
+  }
+  
+  .nav-wrapper { 
+    gap: 0.75rem; 
+  }
+  
+  .nav-links {
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .nav-link {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.375rem;
+  }
+  
+  .tool-details {
+    max-height: 75vh; 
+    padding: 1rem; 
+    border-radius: 0.25rem; 
+  }
+  
+  .quick-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .quick-actions .btn {
+    width: 100%;
+    max-width: 280px;
+  }
+  
+  .nist-workflow { 
+    grid-template-columns: 1fr; 
+  }
+  
+  .approach-selector {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+/* ===================================================================
+   MIGRATION UTILITIES - Additional classes for inline style migration
+   ================================================================= */
+
+/* Height utilities */
+.h-12 { height: 3rem; }
+
+/* Alignment utilities */
+.align-middle { vertical-align: middle; }
+
+/* Font style utilities */
+.italic { font-style: italic; }
+
+/* Border width utilities */
+.border-2 { border-width: 2px; }
+
+/* Border color utilities */
+.border-accent { border-color: var(--color-accent); }
+
+/* Card variants for complex backgrounds */
+.card-warning {
+  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-accent) 100%);
+  color: white;
+}
+
+/* Header variants for complex gradient combinations */
+.header-primary {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+  color: white;
+}
+
+/* Enhanced card info variants (if not already present) */
+.card-info-xl { 
+  background-color: var(--color-bg-secondary); 
+  padding: 2.5rem; 
+  border-radius: 1.25rem; 
+  border: 1px solid var(--color-border); 
+}
+
+/* Ensure we have all text size variants */
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }
+
+/* Additional spacing utilities that might be missing */
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
+
+/* Flex utilities that might be missing */
+.flex-1 { flex: 1; }
+
+/* Additional rounded variants */
+.rounded-xl { border-radius: 0.75rem; }
+.rounded-2xl { border-radius: 1rem; }
+
+/* ===================================================================
+   23. MARKDOWN CONTENT
+   ================================================================= */
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child {
+  margin-top: 0;
+}
+
+.markdown-content p {
+  margin-bottom: 1rem;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.markdown-content li {
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content pre {
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  font-size: 0.875rem;
+}
+
+.markdown-content code:not(pre code) {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875rem;
+}
+
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  background-color: var(--color-bg);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+}
+
+.markdown-content th,
+.markdown-content td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.markdown-content th {
+  background-color: var(--color-bg-secondary);
+  font-weight: 600;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid var(--color-primary);
+  background-color: var(--color-bg-secondary);
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2rem 0;
 }
\ No newline at end of file