diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index 78a79bb..51f88fe 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -33,213 +33,256 @@
   --transition-neo-normal: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* Base styles */
-body {
-  font-family: var(--font-neo-sans);
-  background-color: var(--color-neo-bg);
-  color: var(--color-neo-text);
+/* ============================================================================
+   Base Layer - Foundation styles
+   ============================================================================ */
+
+@layer base {
+  /* Ensure CSS variables are available globally */
+  :root {
+    --color-neo-bg: #fffef5;
+    --color-neo-card: #ffffff;
+    --color-neo-pending: #ffd60a;
+    --color-neo-progress: #00b4d8;
+    --color-neo-done: #70e000;
+    --color-neo-accent: #ff006e;
+    --color-neo-danger: #ff5400;
+    --color-neo-border: #1a1a1a;
+    --color-neo-text: #1a1a1a;
+    --color-neo-text-secondary: #4a4a4a;
+    --font-neo-display: 'Space Grotesk', sans-serif;
+    --font-neo-sans: 'DM Sans', sans-serif;
+    --font-neo-mono: 'JetBrains Mono', monospace;
+    --shadow-neo-sm: 2px 2px 0px rgba(0, 0, 0, 1);
+    --shadow-neo-md: 4px 4px 0px rgba(0, 0, 0, 1);
+    --shadow-neo-lg: 6px 6px 0px rgba(0, 0, 0, 1);
+    --shadow-neo-xl: 8px 8px 0px rgba(0, 0, 0, 1);
+  }
+
+  body {
+    font-family: var(--font-neo-sans);
+    background-color: var(--color-neo-bg);
+    color: var(--color-neo-text);
+  }
+
+  /* Force form elements to inherit colors properly */
+  button,
+  input,
+  textarea,
+  select {
+    color: inherit;
+    font-family: inherit;
+  }
 }
 
 /* ============================================================================
-   Component Classes
+   Component Layer - Reusable component styles
    ============================================================================ */
 
-/* Cards */
-.neo-card {
-  background: var(--color-neo-card);
-  border: 3px solid var(--color-neo-border);
-  box-shadow: var(--shadow-neo-md);
-  transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
-}
+@layer components {
+  /* Cards */
+  .neo-card {
+    background: var(--color-neo-card);
+    border: 3px solid var(--color-neo-border);
+    box-shadow: var(--shadow-neo-md);
+    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
+  }
 
-.neo-card:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-neo-lg);
-}
+  .neo-card:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-neo-lg);
+  }
 
-/* Buttons */
-.neo-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  font-family: var(--font-neo-display);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  color: var(--color-neo-text);
-  background: white;
-  border: 3px solid var(--color-neo-border);
-  box-shadow: var(--shadow-neo-md);
-  transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
-  cursor: pointer;
-}
+  /* Buttons */
+  .neo-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    font-family: var(--font-neo-display);
+    font-weight: 700;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    color: #1a1a1a;
+    background-color: #ffffff;
+    border: 3px solid #1a1a1a;
+    box-shadow: var(--shadow-neo-md);
+    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
+    cursor: pointer;
+  }
 
-.neo-btn:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: var(--shadow-neo-lg);
-}
+  .neo-btn:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: var(--shadow-neo-lg);
+  }
 
-.neo-btn:active {
-  transform: translate(2px, 2px);
-  box-shadow: var(--shadow-neo-sm);
-}
+  .neo-btn:active {
+    transform: translate(2px, 2px);
+    box-shadow: var(--shadow-neo-sm);
+  }
 
-.neo-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: var(--shadow-neo-sm);
-}
+  .neo-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: var(--shadow-neo-sm);
+  }
 
-.neo-btn-primary {
-  background: var(--color-neo-accent);
-  color: white;
-}
+  .neo-btn-primary {
+    background-color: #ff006e;
+    color: #ffffff;
+  }
 
-.neo-btn-success {
-  background: var(--color-neo-done);
-  color: var(--color-neo-text);
-}
+  .neo-btn-success {
+    background-color: #70e000;
+    color: #1a1a1a;
+  }
 
-.neo-btn-warning {
-  background: var(--color-neo-pending);
-  color: var(--color-neo-text);
-}
+  .neo-btn-warning {
+    background-color: #ffd60a;
+    color: #1a1a1a;
+  }
 
-.neo-btn-danger {
-  background: var(--color-neo-danger);
-  color: white;
-}
+  .neo-btn-danger {
+    background-color: #ff5400;
+    color: #ffffff;
+  }
 
-.neo-btn-ghost {
-  background: transparent;
-  color: var(--color-neo-text);
-  box-shadow: none;
-}
+  .neo-btn-ghost {
+    background-color: transparent;
+    color: #1a1a1a;
+    box-shadow: none;
+  }
 
-.neo-btn-ghost:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: var(--color-neo-text);
-  box-shadow: none;
-  transform: none;
-}
+  .neo-btn-ghost:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    color: #1a1a1a;
+    box-shadow: none;
+    transform: none;
+  }
 
-/* Inputs */
-.neo-input {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  font-family: var(--font-neo-sans);
-  font-size: 1rem;
-  color: var(--color-neo-text);
-  background: white;
-  border: 3px solid var(--color-neo-border);
-  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
-  transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
-}
+  /* Inputs */
+  .neo-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-family: var(--font-neo-sans);
+    font-size: 1rem;
+    color: #1a1a1a;
+    background-color: #ffffff;
+    border: 3px solid #1a1a1a;
+    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
+    transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
+  }
 
-.neo-input::placeholder {
-  color: var(--color-neo-text-secondary);
-  opacity: 0.7;
-}
+  .neo-input::placeholder {
+    color: #4a4a4a;
+    opacity: 0.7;
+  }
 
-.neo-input:focus {
-  outline: none;
-  transform: translate(-1px, -1px);
-  box-shadow: var(--shadow-neo-md);
-  border-color: var(--color-neo-accent);
-}
+  .neo-input:focus {
+    outline: none;
+    transform: translate(-1px, -1px);
+    box-shadow: var(--shadow-neo-md);
+    border-color: #ff006e;
+  }
 
-/* Badge */
-.neo-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.75rem;
-  font-family: var(--font-neo-display);
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: var(--color-neo-text);
-  border: 2px solid var(--color-neo-border);
-}
+  /* Badge */
+  .neo-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    font-family: var(--font-neo-display);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #1a1a1a;
+    border: 2px solid #1a1a1a;
+  }
 
-/* Progress Bar */
-.neo-progress {
-  width: 100%;
-  height: 2rem;
-  background: white;
-  border: 3px solid var(--color-neo-border);
-  box-shadow: var(--shadow-neo-sm);
-  overflow: hidden;
-}
+  /* Progress Bar */
+  .neo-progress {
+    width: 100%;
+    height: 2rem;
+    background-color: #ffffff;
+    border: 3px solid #1a1a1a;
+    box-shadow: var(--shadow-neo-sm);
+    overflow: hidden;
+  }
 
-.neo-progress-fill {
-  height: 100%;
-  background: var(--color-neo-done);
-  transition: width 0.5s ease-out;
-}
+  .neo-progress-fill {
+    height: 100%;
+    background-color: #70e000;
+    transition: width 0.5s ease-out;
+  }
 
-/* Modal */
-.neo-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 50;
-}
+  /* Modal */
+  .neo-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 50;
+  }
 
-.neo-modal {
-  background: white;
-  border: 4px solid var(--color-neo-border);
-  box-shadow: var(--shadow-neo-xl);
-  animation: popIn 0.3s var(--transition-neo-fast);
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow: auto;
-}
+  .neo-modal {
+    background-color: #ffffff;
+    border: 4px solid #1a1a1a;
+    box-shadow: var(--shadow-neo-xl);
+    animation: popIn 0.3s var(--transition-neo-fast);
+    max-width: 90vw;
+    max-height: 90vh;
+    overflow: auto;
+  }
 
-/* Dropdown */
-.neo-dropdown {
-  background: white;
-  border: 3px solid var(--color-neo-border);
-  box-shadow: var(--shadow-neo-lg);
-}
+  /* Dropdown */
+  .neo-dropdown {
+    background-color: #ffffff;
+    border: 3px solid #1a1a1a;
+    box-shadow: var(--shadow-neo-lg);
+  }
 
-.neo-dropdown-item {
-  padding: 0.75rem 1rem;
-  cursor: pointer;
-  color: var(--color-neo-text);
-  background: transparent;
-  transition: background var(--transition-neo-fast), color var(--transition-neo-fast);
-}
+  .neo-dropdown-item {
+    display: block;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    color: #1a1a1a;
+    background-color: transparent;
+    text-align: left;
+    border: none;
+    font-size: 0.875rem;
+    transition: background-color var(--transition-neo-fast);
+  }
 
-.neo-dropdown-item:hover {
-  background: var(--color-neo-pending);
-  color: var(--color-neo-text);
-}
+  .neo-dropdown-item:hover {
+    background-color: #ffd60a;
+    color: #1a1a1a;
+  }
 
-/* Tooltip */
-.neo-tooltip {
-  background: var(--color-neo-text);
-  color: white;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  border: 2px solid var(--color-neo-border);
-  box-shadow: var(--shadow-neo-sm);
-}
+  /* Tooltip */
+  .neo-tooltip {
+    background-color: #1a1a1a;
+    color: #ffffff;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    border: 2px solid #1a1a1a;
+    box-shadow: var(--shadow-neo-sm);
+  }
 
-/* Empty State */
-.neo-empty-state {
-  background: var(--color-neo-bg);
-  border: 4px dashed var(--color-neo-border);
-  padding: 2rem;
-  text-align: center;
+  /* Empty State */
+  .neo-empty-state {
+    background-color: var(--color-neo-bg);
+    border: 4px dashed #1a1a1a;
+    padding: 2rem;
+    text-align: center;
+  }
 }
 
 /* ============================================================================
@@ -289,54 +332,59 @@ body {
   }
 }
 
-.animate-slide-in {
-  animation: slideIn 0.3s ease-out;
-}
+/* ============================================================================
+   Utilities Layer
+   ============================================================================ */
 
-.animate-pop-in {
-  animation: popIn 0.3s var(--transition-neo-fast);
-}
+@layer utilities {
+  .animate-slide-in {
+    animation: slideIn 0.3s ease-out;
+  }
 
-.animate-pulse-neo {
-  animation: neoPulse 2s infinite;
-}
+  .animate-pop-in {
+    animation: popIn 0.3s var(--transition-neo-fast);
+  }
 
-.animate-complete {
-  animation: completePop 0.5s var(--transition-neo-fast);
+  .animate-pulse-neo {
+    animation: neoPulse 2s infinite;
+  }
+
+  .animate-complete {
+    animation: completePop 0.5s var(--transition-neo-fast);
+  }
+
+  .font-display {
+    font-family: var(--font-neo-display);
+  }
+
+  .font-sans {
+    font-family: var(--font-neo-sans);
+  }
+
+  .font-mono {
+    font-family: var(--font-neo-mono);
+  }
 }
 
 /* ============================================================================
-   Utilities
+   Scrollbar Styling (outside layers for broad compatibility)
    ============================================================================ */
 
-.font-display {
-  font-family: var(--font-neo-display);
-}
-
-.font-sans {
-  font-family: var(--font-neo-sans);
-}
-
-.font-mono {
-  font-family: var(--font-neo-mono);
-}
-
-/* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-neo-bg);
-  border: 2px solid var(--color-neo-border);
+  background: #fffef5;
+  border: 2px solid #1a1a1a;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-neo-border);
-  border: 2px solid var(--color-neo-border);
+  background: #1a1a1a;
+  border: 2px solid #1a1a1a;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neo-text-secondary);
+  background: #4a4a4a;
 }