From 0eed65e623aa08b5cefbecd70295e22492d844c8 Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Sun, 27 Jul 2025 21:08:00 +0200
Subject: [PATCH] stylesheet refactor

---
 README.md                  |    3 +
 src/pages/index.astro      |    2 +-
 src/styles/global copy.css | 2920 ++++++++++++++++++++++++++++++
 src/styles/global.css      | 3410 +++++++++++++++++++-----------------
 4 files changed, 4711 insertions(+), 1624 deletions(-)
 create mode 100644 src/styles/global copy.css

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/pages/index.astro b/src/pages/index.astro
index 7b5d0c4..7847987 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>
       
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..5470c26 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,368 @@ 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 {
+  grid-template-columns: 1fr 1fr;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.grid-4 {
+  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;
+}
+
+/* ===================================================================
+   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; }
+
+/* ===================================================================
+   7. NAVIGATION
+   ================================================================= */
+
 nav {
   background-color: var(--color-bg-secondary);
   border-bottom: 1px solid var(--color-border);
@@ -161,7 +540,6 @@ nav {
   height: 32px;
 }
 
-/* Logo theme switching */
 .nav-logo-light { display: block; }
 .nav-logo-dark { display: none; }
 
@@ -192,7 +570,10 @@ nav {
   color: var(--color-primary);
 }
 
-/* Consolidated Button System */
+/* ===================================================================
+   8. BUTTON SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -207,15 +588,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 +612,7 @@ nav {
 
 .btn-secondary:hover {
   background-color: var(--color-bg-tertiary);
+  border-color: var(--color-primary);
 }
 
 .btn-accent {
@@ -239,15 +626,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 +667,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 +710,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 +733,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 +741,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 +794,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 +844,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 +978,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 +1018,10 @@ input[type="checkbox"] {
   width: 100%;
 }
 
-/* Matrix Components - Consolidated */
+/* ===================================================================
+   13. MATRIX SYSTEM (CONSOLIDATED)
+   ================================================================= */
+
 .matrix-wrapper {
   overflow-x: auto;
   margin: 1rem 0;
@@ -575,7 +1082,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 +1098,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 +1113,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 +1145,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 +1168,9 @@ input[type="checkbox"] {
   transition: var(--transition-medium);
 }
 
-.tool-details.active { display: block; }
+.tool-details.active { 
+  display: block; 
+}
 
 .modal-overlay {
   display: none;
@@ -706,9 +1184,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 +1203,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 +1252,7 @@ input[type="checkbox"] {
   border-color: var(--color-primary-hover);
 }
 
-/* Tag Cloud - Consolidated */
+/* Tag Cloud */
 .tag-header {
   display: flex;
   align-items: center;
@@ -788,7 +1271,9 @@ input[type="checkbox"] {
   position: relative;
 }
 
-.tag-cloud.expanded { max-height: 1000px; }
+.tag-cloud.expanded { 
+  max-height: 1000px; 
+}
 
 .tag-cloud::after {
   content: '';
@@ -803,7 +1288,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 +1307,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 +1350,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 +1392,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 +1407,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 +1424,7 @@ input[type="checkbox"] {
   align-items: center;
   font-size: 0.875rem;
   transition: var(--transition-fast);
+  cursor: pointer;
 }
 
 .toggle-label:hover {
@@ -1024,6 +1437,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 +1450,26 @@ 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;
-}
+/* ===================================================================
+   17. WORKFLOW SYSTEM (CONSOLIDATED)
+   ================================================================= */
 
-.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;
@@ -1092,7 +1507,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 +1569,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 +1652,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 +1821,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 +1832,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 +1887,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 +2402,683 @@ 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;
+  }
+}
+
+/* ===================================================================
+   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