From 325d6c6c1267ae94dce140df89fef4cd4b6af6b0 Mon Sep 17 00:00:00 2001
From: overcuriousity <overcuriousity@posteo.org>
Date: Sat, 26 Jul 2025 18:44:51 +0200
Subject: [PATCH] stylesheet refactoring

---
 src/styles/global.css | 1223 +++++++++++++++++------------------------
 1 file changed, 497 insertions(+), 726 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index e69bf3b..72bc487 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -24,13 +24,13 @@
   --color-error: #dc2626;
   
   /* Enhanced card type colors */
-  --color-hosted: #7c3aed;           /* More vibrant purple */
+  --color-hosted: #7c3aed;
   --color-hosted-bg: #f3f0ff;
-  --color-oss: #059669;              /* Deeper green for better contrast */
+  --color-oss: #059669;
   --color-oss-bg: #ecfdf5;
-  --color-method: #0891b2;           /* Distinct teal-cyan for methods */
-  --color-method-bg: #f0f9ff;        /* Fixed: proper light background */
-  --color-concept: #ea580c;          /* Warmer orange-red for concepts */
+  --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%);
@@ -43,7 +43,6 @@
 }
 
 [data-theme="dark"] {
-  /* Dark Theme Colors */
   --color-bg: #0f172a;
   --color-bg-secondary: #1e293b;
   --color-bg-tertiary: #334155;
@@ -57,14 +56,13 @@
   --color-warning: #f59e0b;
   --color-error: #f87171;
   
-  /* Enhanced dark card type colors */
-  --color-hosted: #a855f7;           /* Brighter purple for dark mode */
+  --color-hosted: #a855f7;
   --color-hosted-bg: #2e1065;
-  --color-oss: #10b981;              /* Vibrant green */
+  --color-oss: #10b981;
   --color-oss-bg: #064e3b;
-  --color-method: #0891b2;           /* Distinct teal-cyan */
-  --color-method-bg: #164e63;        /* Proper dark background */
-  --color-concept: #f97316;          /* Bright orange for dark mode */
+  --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%);
@@ -88,7 +86,7 @@ body {
   flex-direction: column;
 }
 
-/* Typography */
+/* Typography - Consolidated */
 h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1.25;
@@ -163,22 +161,12 @@ nav {
   height: 32px;
 }
 
-/* Logo theme switching - global styles */
-.nav-logo-light {
-  display: block;
-}
+/* Logo theme switching */
+.nav-logo-light { display: block; }
+.nav-logo-dark { display: none; }
 
-.nav-logo-dark {
-  display: none;
-}
-
-[data-theme="dark"] .nav-logo-light {
-  display: none;
-}
-
-[data-theme="dark"] .nav-logo-dark {
-  display: block;
-}
+[data-theme="dark"] .nav-logo-light { display: none; }
+[data-theme="dark"] .nav-logo-dark { display: block; }
 
 .nav-links {
   display: flex;
@@ -240,6 +228,28 @@ nav {
   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;
@@ -259,18 +269,7 @@ nav {
   background-color: var(--color-bg-secondary);
 }
 
-.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);
-}
-
-/* Forms */
+/* Forms - Consolidated */
 input, select, textarea {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -285,6 +284,8 @@ input, select, textarea {
 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 */
@@ -324,34 +325,6 @@ select {
   cursor: pointer;
 }
 
-/* Scrollable checkbox containers */
-.checkbox-container {
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid var(--color-border);
-  border-radius: 0.375rem;
-  padding: 0.75rem;
-  background-color: var(--color-bg);
-}
-
-.checkbox-container::-webkit-scrollbar {
-  width: 8px;
-}
-
-.checkbox-container::-webkit-scrollbar-track {
-  background: var(--color-bg-secondary);
-  border-radius: 4px;
-}
-
-.checkbox-container::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 4px;
-}
-
-.checkbox-container::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
 input[type="checkbox"] {
   width: 16px;
   height: 16px;
@@ -360,16 +333,6 @@ input[type="checkbox"] {
   cursor: pointer;
 }
 
-/* Better focus states for accessibility */
-input[type="checkbox"]:focus,
-input[type="text"]:focus,
-input[type="url"]:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
 /* Consolidated Card System */
 .card {
   background-color: var(--color-bg);
@@ -384,16 +347,14 @@ select:focus {
   box-shadow: var(--shadow-md);
 }
 
-/* Card type modifiers - Support both approaches */
-.card-hosted,
-.card[data-type="hosted"] {
+/* 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,
-.card[data-type="oss"] {
+.card-oss {
   background-color: var(--color-oss-bg);
   border-color: var(--color-oss);
 }
@@ -408,6 +369,7 @@ select:focus {
   border-color: var(--color-concept);
 }
 
+/* Grid Systems - Consolidated */
 .grid-auto-fit {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 350px));
@@ -415,10 +377,7 @@ select:focus {
   justify-content: center;
 }
 
-.grid-auto-fit-lg { 
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
-}
-
+/* Tool Cards - Consolidated */
 .tool-card {
   height: 300px;
   display: flex;
@@ -462,21 +421,14 @@ select:focus {
   word-break: break-word;
 }
 
-.tool-card:hover {
-  box-shadow: var(--shadow-md);
-}
-
 .tool-card-metadata {
   display: flex;
-  /*flex-wrap: wrap;*/
   align-items: center;
   gap: 1rem;
   margin-bottom: 0.75rem;
   line-height: 1;
 }
 
-
-
 .metadata-item {
   display: flex;
   align-items: center;
@@ -521,6 +473,7 @@ select:focus {
   opacity: 0.8;
 }
 
+/* Card-specific gradients */
 .card-hosted .tool-tags-container::after {
   background: linear-gradient(to right, transparent 0%, var(--color-hosted-bg) 70%);
 }
@@ -534,7 +487,7 @@ select:focus {
 }
 
 .card-concept .tool-tags-container::after {
-  background: linear-gradient(to right, transparent 0%, var(--color-method-bg) 70%);
+  background: linear-gradient(to right, transparent 0%, var(--color-concept-bg) 70%);
 }
 
 .tool-card-buttons {
@@ -547,19 +500,21 @@ select:focus {
   gap: 0.5rem;
 }
 
-.button-row .btn {
-  flex: 1;
+.button-row .btn,
+.single-button {
   font-size: 0.8125rem;
   padding: 0.625rem 1rem;
 }
 
+.button-row .btn {
+  flex: 1;
+}
+
 .single-button {
   width: 100%;
-  font-size: 0.8125rem;
-  padding: 0.625rem 1rem;
 }
 
-/* Matrix Components */
+/* Matrix Components - Consolidated */
 .matrix-wrapper {
   overflow-x: auto;
   margin: 1rem 0;
@@ -601,14 +556,6 @@ select:focus {
   background-color: var(--color-bg-secondary);
 }
 
-.matrix-table th {
-  background-color: var(--color-bg-secondary);
-  font-weight: 600;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
 .matrix-table th:first-child,
 .matrix-table td:first-child {
   width: 200px;
@@ -628,7 +575,7 @@ select:focus {
   vertical-align: top;
 }
 
-/* Matrix highlighting */
+/* Matrix highlighting - Consolidated */
 .matrix-table tr.highlight-row th,
 .matrix-table tr.highlight-row td,
 .matrix-table th.highlight-column,
@@ -644,6 +591,7 @@ select:focus {
   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,
@@ -659,6 +607,7 @@ select:focus {
   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;
@@ -723,7 +672,7 @@ select:focus {
   margin: 0.125rem;
 }
 
-/* Tool Details Modal - Enhanced for dual modals */
+/* Tool Details Modal - Consolidated */
 .tool-details {
   display: none;
   position: fixed;
@@ -774,7 +723,7 @@ select:focus {
   width: 45vw;
 }
 
-/* Phase Controls */
+/* Phase Controls - Consolidated */
 .domain-phase-container {
   display: grid;
   grid-template-columns: 1fr 2fr;
@@ -820,7 +769,7 @@ select:focus {
   border-color: var(--color-primary-hover);
 }
 
-/* Tag Cloud */
+/* Tag Cloud - Consolidated */
 .tag-header {
   display: flex;
   align-items: center;
@@ -912,17 +861,7 @@ select:focus {
   transform: translateY(-1px);
 }
 
-.btn-sm {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.8125rem;
-}
-
-.btn-xs {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-}
-
-/* Loading state improvements */
+/* Loading states */
 .btn.loading {
   opacity: 0.7;
   pointer-events: none;
@@ -943,12 +882,12 @@ select:focus {
   animation: spin 1s linear infinite;
 }
 
-/* Collaboration Tools */
+/* Collaboration Tools - Consolidated */
 .collaboration-tools-compact {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
-  flex-direction: row; /* Force horizontal layout */
+  flex-direction: row;
 }
 
 .collaboration-tool-compact {
@@ -1015,7 +954,7 @@ select:focus {
   margin-bottom: 0.5rem;
 }
 
-/* AI Interface */
+/* AI Interface - Consolidated */
 .ai-interface {
   padding: 2rem 0;
   max-width: 1200px;
@@ -1076,10 +1015,7 @@ select:focus {
   box-shadow: 0 2px 4px 0 rgb(255 255 255 / 10%);
 }
 
-[data-theme="dark"] .tool-rank-badge {
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 50%);
-}
-
+/* Focus states for accessibility - Consolidated */
 .toggle-switch:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 2px;
@@ -1092,6 +1028,7 @@ select:focus {
   border-radius: 0.25rem;
 }
 
+/* Workflow Components - Consolidated */
 .workflow-container {
   display: flex;
   flex-direction: column;
@@ -1151,6 +1088,7 @@ select:focus {
   margin: 0.5rem 0;
 }
 
+/* Tool Recommendations - Consolidated */
 .tool-recommendation {
   background-color: var(--color-bg);
   border: 1px solid var(--color-border);
@@ -1187,16 +1125,6 @@ select:focus {
   border-color: var(--color-method);
 }
 
-.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-rec-header {
   display: flex;
   justify-content: space-between;
@@ -1243,6 +1171,7 @@ select:focus {
   color: var(--color-text-secondary);
 }
 
+/* Tool Results - Consolidated */
 .tool-results-container {
   max-width: 1000px;
   margin: 0 auto;
@@ -1260,13 +1189,8 @@ select:focus {
   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:nth-child(2) { animation-delay: 0.1s; }
+.tool-detailed-recommendation:nth-child(3) { animation-delay: 0.2s; }
 
 .tool-detailed-recommendation:hover {
   transform: translateY(-2px);
@@ -1289,8 +1213,14 @@ select:focus {
   border-color: var(--color-oss);
 }
 
-.tool-detailed-recommendation.card-oss:hover {
-  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 {
@@ -1299,6 +1229,10 @@ select:focus {
   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;
@@ -1306,12 +1240,7 @@ select:focus {
   margin-bottom: 0.75rem;
 }
 
-.tool-card.highlight-flash,
-.tool-chip.highlight-flash,
-.tool-recommendation.highlight-flash {
-  animation: highlight-flash 2s ease-out;
-}
-
+/* Pros/Cons - Consolidated */
 .pros-cons-section {
   animation: fadeIn 0.4s ease-in;
 }
@@ -1359,6 +1288,7 @@ select:focus {
   border-left: 3px solid var(--color-text-secondary);
 }
 
+/* Knowledgebase - Consolidated */
 .kb-entry {
   margin-bottom: 1rem;
   transition: var(--transition-fast);
@@ -1368,29 +1298,12 @@ select:focus {
 
 .kb-entry:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   box-shadow: var(--shadow-md);
 }
 
 .kb-entry:target {
   animation: highlight-flash 2s ease-out;
 }
-.kb-entry-header {
-  padding: 1rem 0;
-  transition: var(--transition-fast);
-}
-
-.kb-entry-header:hover {
-  background-color: var(--color-bg-secondary);
-  margin: -0.5rem;
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-}
-.dark .kb-entry:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.kb-expand-icon svg { transition: var(--transition-medium); }
 
 .kb-content { line-height: 1.7; }
 
@@ -1410,383 +1323,101 @@ footer {
   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; }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+/* 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;
 }
 
-@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);
-  }
+/* 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);
 }
 
-@keyframes shimmer {
-  0% {
-    opacity: 0.8;
-  }
-  100% {
-    opacity: 1;
-  }
+.fab-button:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
 }
 
-/*Perfect! Here's the absolutely brutal, eye-melting version:*/
-
-@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;
-  }
-}
-/*
-This monstrosity includes:
-
-Neon rainbow cycling: Bright green → Hot pink → Electric blue → Neon purple → Nuclear yellow → Orange-red
-Double shadows: Inner colored shadow + outer glow effect
-Aggressive scaling: Up to 1.25x size
-Rotation wobble: Cards wiggle back and forth
-Strobing borders: Bright colored borders that change with each keyframe
-8 keyframes: More frequent color/effect changes
-Higher opacity: More saturated colors (up to 100% on yellow)
-
-This will literally assault the user's retinas. They'll need sunglasses to look at their shared tools! 🌈💥👁️‍🗨️*/
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.05);
-    opacity: 0.8;
-  }
+[data-theme="dark"] .fab-button {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
 }
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+[data-theme="dark"] .fab-button:hover {
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-@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 >= 1200px) {
-  #kb-entries {
-    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
-    gap: 2rem;
-  }
-}
-
-
-@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;
-  }
-}
-
-@media (width >= 768px) {
-  #kb-entries {
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-    gap: 1.5rem;
-  }
-}
-
-@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;
-  }
-  
-  .tool-metadata {
-    grid-template-columns: 1fr;
-    gap: 0.5rem;
-  }
-  .card {
-    padding: 1rem;
-  }
-  .form-grid {
-    gap: 0.75rem;
-  }
-  .checkbox-container {
-    max-height: 150px;
-  }
-  .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;
-  }
-}
-
-@media (width <= 480px) {
-  .phase-buttons {
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-  
-  .phase-button { width: 100%; }
-  
-  .phase-tools { grid-template-columns: 1fr; }
-  
-  /* Only stack collaboration cards on very small screens */
-  .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;
-  }
-}
-
-
-
-
-
-
+/* Markdown content */
 .markdown-content h1,
 .markdown-content h2,
 .markdown-content h3,
@@ -1902,146 +1533,7 @@ This will literally assault the user's retinas. They'll need sunglasses to look
   flex-shrink: 0;
 }
 
-.flex { display: flex; }
-.flex-col { flex-direction: column; }
-.flex-row { flex-direction: row; }
-.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; }
-.items-end { align-items: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-end { justify-content: flex-end; }
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-
-.grid { display: grid; }
-.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
-.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
-.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
-.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
-
-.bottom-8 { bottom: 2rem; }
-.right-8 { right: 2rem; }
-
-.max-w-lg { max-width: 32rem; }
-.max-w-6xl { max-width: 72rem; }
-
-.gap-0 { gap: 0; }
-.gap-1 { gap: 0.25rem; }
-.gap-2 { gap: 0.5rem; }
-.gap-3 { gap: 0.75rem; }
-.gap-4 { gap: 1rem; }
-.gap-5 { gap: 1.25rem; }
-.gap-6 { gap: 1.5rem; }
-.gap-8 { gap: 2rem; }
-
-.m-0 { margin: 0; }
-.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; }
-.mt-auto { margin-top: auto; }
-.mt-8 { margin-top: 2rem; }
-.mr-2 { margin-right: 0.5rem; }
-.mr-3 { margin-right: 0.75rem; }
-
-.p-0 { padding: 0; }
-.p-4 { padding: 1rem; }
-.p-6 { padding: 1.5rem; }
-.p-8 { padding: 2rem; }
-
-.pt-3 { padding-top: 0.75rem; }
-.pb-3 { padding-bottom: 0.75rem; }
-.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
-.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
-
-
-.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-medium { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.font-bold { font-weight: 700; }
-
-.rounded { border-radius: 0.375rem; }
-.rounded-md { border-radius: 0.5rem; }
-.rounded-lg { border-radius: 0.75rem; }
-.rounded-full { border-radius: 9999px; }
-
-.shadow-sm { box-shadow: var(--shadow-sm); }
-.shadow-md { box-shadow: var(--shadow-md); }
-.shadow-lg { box-shadow: var(--shadow-lg); }
-
-.border { border: 1px solid var(--color-border); }
-.border-l-4 { border-left: 4px solid var(--color-border); }
-
-.bg-primary { background-color: var(--color-primary); }
-.bg-secondary { background-color: var(--color-bg-secondary); }
-.bg-tertiary { background-color: var(--color-bg-tertiary); }
-
-.text-primary { color: var(--color-primary); }
-.text-secondary { color: var(--color-text-secondary); }
-.text-white { color: white; }
-
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-.w-full { width: 100%; }
-.h-full { height: 100%; }
-.min-w-0 { min-width: 0; }
-.overflow-hidden { overflow: hidden; }
-.cursor-pointer { cursor: pointer; }
-
-.flex-center { 
-  display: flex; 
-  align-items: center; 
-  justify-content: center; 
-}
-.flex-between { 
-  display: flex; 
-  align-items: center; 
-  justify-content: space-between; 
-}
-.flex-start { 
-  display: flex; 
-  align-items: center; 
-}
-
-.field-help {
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-/* Improved field error styling */
-.field-error {
-  color: var(--color-error);
-  font-size: 0.8125rem;
-  margin-top: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.field-error::before {
-  content: "⚠";
-  font-size: 0.75rem;
-}
-
-/* Form section improvements */
+/* Form styling */
 .form-section {
   border: 1px solid var(--color-border);
   border-radius: 0.5rem;
@@ -2057,33 +1549,6 @@ This will literally assault the user's retinas. They'll need sunglasses to look
   font-size: 1.125rem;
 }
 
-/* Success/warning notices in forms */
-.form-notice {
-  padding: 1rem;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  border-left: 3px solid;
-}
-
-.form-notice.success {
-  background-color: var(--color-oss-bg);
-  border-left-color: var(--color-accent);
-  color: var(--color-text);
-}
-
-.form-notice.warning {
-  background-color: var(--color-hosted-bg);
-  border-left-color: var(--color-warning);
-  color: var(--color-text);
-}
-
-.form-notice.info {
-  background-color: var(--color-bg-secondary);
-  border-left-color: var(--color-primary);
-  color: var(--color-text);
-}
-
-/* Better form grid layout */
 .form-grid {
   display: grid;
   gap: 1rem;
@@ -2093,7 +1558,6 @@ This will literally assault the user's retinas. They'll need sunglasses to look
   grid-template-columns: 1fr 1fr;
 }
 
-/* Better spacing for form elements */
 .form-group {
   margin-bottom: 1.5rem;
 }
@@ -2109,46 +1573,353 @@ This will literally assault the user's retinas. They'll need sunglasses to look
   color: var(--color-text);
 }
 
-.form-label.required::after {
-  content: " *";
-  color: var(--color-error);
+/* Animations - Consolidated */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-#queue-status {
-  animation: slideDown 0.3s ease-out;
+@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);
+  }
 }
 
-#queue-position-badge {
-  animation: pulse 2s infinite;
-  transition: all 0.3s ease;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-#queue-progress {
-  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
-  animation: shimmer 2s ease-in-out infinite alternate;
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
 }
 
-#kb-entries {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
-.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);
+@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;
+  }
 }
 
-.fab-button:hover {
-  transform: scale(1.1);
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
+/* Highlight animation triggers */
+.tool-card.highlight-flash,
+.tool-chip.highlight-flash,
+.tool-recommendation.highlight-flash {
+  animation: highlight-flash 2s ease-out;
 }
 
-[data-theme="dark"] .fab-button {
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+/* Responsive Design - Consolidated Media Queries */
+@media (width >= 768px) {
+  #kb-entries {
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+    gap: 1.5rem;
+  }
 }
 
-[data-theme="dark"] .fab-button:hover {
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
+@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;
+  }
+}
+
+@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;
+  }
+}
+
+@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;
+  }
+}
\ No newline at end of file