🐳 07/02 - 04:49 - Role: You are a senior front-end developer specializing in CSS optimization for interface refinement.Goal: Transform the interface into a rigorously minimalist design by eliminating

style.css

@@ -1,176 +1,1013 @@
-/* Custom Scrollbar */
+/* Custom Scrollbar - Minimalist */
 ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #0f172a;
+    background: #F5F5F5;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #334155;
-    border-radius: 4px;
+    background: #333333;
+    border-radius: 0;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #475569;
-}
-
-/* Range Slider Customization */
+/* Range Slider - Minimalist */
 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
+    width: 100%;
 }
 
 input[type="range"]::-webkit-slider-track {
-    background: #1e293b;
-    height: 6px;
-    border-radius: 3px;
+    background: #333333;
+    height: 4px;
+    border-radius: 0;
 }
 
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    background: #6366f1;
-    height: 18px;
-    width: 18px;
+    background: #333333;
+    height: 16px;
+    width: 16px;
     border-radius: 50%;
     margin-top: -6px;
-    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
-    transition: all 0.2s;
+    box-shadow: none;
+    transition: none;
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.1);
-    box-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
+    transform: none;
+    box-shadow: none;
+    background: #000000;
 }
 
 input[type="range"]::-moz-range-track {
-    background: #1e293b;
-    height: 6px;
-    border-radius: 3px;
+    background: #333333;
+    height: 4px;
+    border-radius: 0;
 }
 
 input[type="range"]::-moz-range-thumb {
-    background: #6366f1;
-    height: 18px;
-    width: 18px;
+    background: #333333;
+    height: 16px;
+    width: 16px;
     border-radius: 50%;
     border: none;
-    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
-}
-
-/* Animations */
-@keyframes gradient-shift {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-}
-
-.animate-gradient {
-    background-size: 200% 200%;
-    animation: gradient-shift 8s ease infinite;
-}
-
-/* Glassmorphism utilities */
-.glass {
-    background: rgba(15, 23, 42, 0.7);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: none;
 }
 
 /* Waveform Canvas */
 #waveform {
     image-rendering: pixelated;
     cursor: crosshair;
+    background: #FFFFFF;
 }
 
-/* Tab Transitions */
+/* Tab Transitions - Functional Only */
 .tab-content {
-    transition: opacity 0.3s ease-in-out;
-}
-
-.tab-content.hidden {
     display: none;
-    opacity: 0;
 }
 
 .tab-content:not(.hidden) {
-    opacity: 1;
+    display: block;
 }
 
 /* Block Preview Items */
 .block-item {
-    animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateX(-10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+    margin-bottom: 16px;
+    line-height: 1.5;
 }
 
 /* Log Entries */
 .log-entry {
-    border-left: 2px solid transparent;
-    padding-left: 8px;
-    animation: fadeIn 0.2s ease-out;
+    border-left: 2px solid #333333;
+    padding-left: 16px;
+    margin-bottom: 12px;
+    line-height: 1.5;
 }
 
-.log-entry.info { border-left-color: #6366f1; }
-.log-entry.success { border-left-color: #10b981; }
-.log-entry.warning { border-left-color: #f59e0b; }
-.log-entry.error { border-left-color: #ef4444; }
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
+.log-entry.info { border-left-color: #333333; }
+.log-entry.success { border-left-color: #666666; }
+.log-entry.warning { border-left-color: #999999; }
+.log-entry.error { border-left-color: #000000; }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    .glass {
-        backdrop-filter: none;
-        -webkit-backdrop-filter: none;
+    body {
+        font-size: 16px;
     }
 }
 
 /* Custom Checkbox */
 input[type="checkbox"] {
-    accent-color: #6366f1;
+    accent-color: #333333;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
 }
 
-/* Drag over state */
+/* Drag over state - Functional */
 .drag-over {
-    border-color: #6366f1 !important;
-    background: rgba(99, 102, 241, 0.1) !important;
+    border: 2px dashed #333333 !important;
+    background: #FFFFFF !important;
 }
 
-/* Processing pulse */
+/* Processing state - Functional indicator */
 .processing-pulse {
     position: relative;
+    opacity: 0.7;
+}
+
+/* Base Typography & Spacing Reset */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333333;
+    background-color: #F5F5F5;
+}
+
+p, li {
+    line-height: 1.5;
+    margin-bottom: 24px;
+}
+
+/* Input Fields */
+input, textarea, select {
+    font-size: 16px;
+    line-height: 1.5;
+    padding: 12px 16px;
+    border: 1px solid #333333;
+    background-color: #FFFFFF;
+    color: #333333;
+    border-radius: 0;
+}
+
+input:focus, textarea:focus, select:focus {
+    outline: 2px solid #333333;
+    outline-offset: 2px;
+}
+
+/* Buttons */
+button {
+    font-size: 16px;
+    line-height: 1.5;
+    padding: 12px 24px;
+    border: 1px solid #333333;
+    background-color: #FFFFFF;
+    color: #333333;
+    cursor: pointer;
+    border-radius: 0;
+    margin: 8px 0;
+}
+
+button:hover {
+    background-color: #333333;
+    color: #FFFFFF;
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Cards & Containers */
+.bg-slate-900, .bg-slate-900\/80, .bg-slate-950, .bg-slate-800, .bg-slate-800\/50, .bg-slate-950\/50, .bg-slate-900\/50, .bg-black\/40 {
+    background-color: #FFFFFF !important;
+    border: 1px solid #333333;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+
+/* Border removals */
+.border-slate-800, .border-slate-700, .border-slate-700\/50, .border-slate-800\/50, .border-primary-500\/20, .border-secondary-500\/50, .border-slate-600 {
+    border: 1px solid #333333 !important;
+}
+
+.border-b, .border-t, .border-r, .border-l {
+    border-color: #333333 !important;
+}
+
+/* Text Colors */
+.text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-primary-400, .text-secondary-400, .text-emerald-400, .text-slate-500, .text-slate-600 {
+    color: #333333 !important;
+}
+
+/* Remove all shadows */
+.shadow-lg, .shadow-xl, .shadow-2xl, .shadow-primary-500\/20, .shadow-primary-500\/25, .shadow-secondary-500\/20 {
+    box-shadow: none !important;
+}
+
+/* Remove gradients */
+.bg-gradient-to-br, .bg-gradient-to-r, .from-primary-500, .to-secondary-500, .from-slate-100, .to-slate-300, .from-primary-600, .to-primary-500 {
+    background: #FFFFFF !important;
+    background-image: none !important;
+}
+
+/* Spacing Increases */
+.p-4, .px-4, .py-4 {
+    padding: 24px !important;
+}
+
+.p-3, .px-3, .py-3 {
+    padding: 16px !important;
+}
+
+.p-2 {
+    padding: 12px !important;
+}
+
+.p-6, .px-6, .py-6 {
+    padding: 24px !important;
+}
+
+.p-8 {
+    padding: 32px !important;
+}
+
+.m-4, .mx-4, .my-4 {
+    margin: 24px !important;
+}
+
+.mb-4, .my-4 {
+    margin-bottom: 24px !important;
+}
+
+.mt-4 {
+    margin-top: 24px !important;
+}
+
+.mb-6, .my-6 {
+    margin-bottom: 48px !important;
+}
+
+.mt-6 {
+    margin-top: 48px !important;
+}
+
+.mb-8 {
+    margin-bottom: 48px !important;
+}
+
+.space-y-6 > * + * {
+    margin-top: 48px !important;
+}
+
+.space-y-4 > * + * {
+    margin-top: 24px !important;
+}
+
+.space-y-2 > * + * {
+    margin-top: 16px !important;
+}
+
+.space-y-3 > * + * {
+    margin-top: 24px !important;
+}
+
+.gap-4 {
+    gap: 24px !important;
+}
+
+.gap-6 {
+    gap: 48px !important;
+}
+
+/* Fixed position adjustments */
+.fixed {
+    background-color: #F5F5F5 !important;
+    border: 1px solid #333333 !important;
+    box-shadow: none !important;
+}
+
+/* Rounded corners removal */
+.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-full, .rounded, .rounded-3xl {
+    border-radius: 0 !important;
+}
+
+/* Icon sizing */
+.w-4, .h-4 {
+    width: 16px !important;
+    height: 16px !important;
+}
+
+.w-5, .h-5 {
+    width: 20px !important;
+    height: 20px !important;
+}
+
+.w-6, .h-6 {
+    width: 24px !important;
+    height: 24px !important;
+}
+
+.w-8, .h-8 {
+    width: 24px !important;
+    height: 24px !important;
+}
+
+/* Form labels */
+label {
+    font-size: 16px;
+    line-height: 1.5;
+    margin-bottom: 8px;
+    display: block;
+    color: #333333;
+}
+
+/* Tab buttons */
+.tab-btn {
+    font-size: 16px;
+    padding: 24px;
+    border: none;
+    border-bottom: 1px solid #333333;
+    background-color: #F5F5F5;
+    color: #333333;
+    cursor: pointer;
+}
+
+/* Stat card specific */
+stat-card {
+    border: 1px solid #333333;
+    padding: 24px;
+    background-color: #FFFFFF;
+    display: block;
+    margin-bottom: 24px;
+}
+
+/* Textarea specific */
+textarea {
+    min-height: 120px;
+    resize: vertical;
+    line-height: 1.5;
+    font-family: inherit;
+}
+
+/* File queue items */
+#file-queue > div {
+    border: 1px solid #333333;
+    padding: 16px;
+    margin-bottom: 16px;
+    background-color: #FFFFFF;
+}
+
+/* Remove decorative color classes */
+.text-primary-500, .text-secondary-500, .text-emerald-500, .text-red-400, .bg-primary-500\/10, .bg-secondary-500\/10, .bg-emerald-500\/10, .bg-red-500\/10 {
+    color: #333333 !important;
+    background-color: #F5F5F5 !important;
+}
+
+/* Links */
+a {
+    color: #333333;
+    text-decoration: underline;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+a:hover {
+    color: #000000;
+    text-decoration: none;
+}
+
+/* Upload zone borders */
+#drop-zone, #json-upload-zone {
+    border: 2px dashed #333333 !important;
+    background-color: #FFFFFF !important;
+    padding: 48px 24px;
+}
+
+#drop-zone:hover, #json-upload-zone:hover {
+    background-color: #F5F5F5 !important;
 }
 
-.processing-pulse::after {
-    content: '';
+/* Canvas container */
+canvas {
+    background-color: #FFFFFF;
+    border: 1px solid #333333;
+}
+
+/* Mobile menu */
+#mobile-menu {
+    background-color: #FFFFFF;
+    border: 1px solid #333333;
+    padding: 24px;
+}
+
+/* Sidebar */
+aside {
+    background-color: #F5F5F5 !important;
+    border-right: 1px solid #333333 !important;
+    padding: 24px;
+}
+
+/* Navigation */
+nav {
+    background-color: #F5F5F5 !important;
+    border-bottom: 1px solid #333333 !important;
+    padding: 24px;
+}
+
+/* Main content area */
+main {
+    padding: 48px 24px;
+}
+
+/* Button group spacing */
+.flex > button, .flex > .w-px {
+    margin: 0 12px;
+}
+
+/* Checkbox and radio spacing */
+input[type="checkbox"], input[type="radio"] {
+    margin-right: 12px;
+}
+
+/* Help text */
+.text-xs, .text-sm {
+    font-size: 16px !important;
+    line-height: 1.5 !important;
+}
+
+/* Select dropdown arrow removal for consistency */
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: none;
+    border-radius: 0;
+}
+
+/* Number input */
+input[type="number"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+/* Focus states for accessibility */
+*:focus-visible {
+    outline: 2px solid #333333;
+    outline-offset: 2px;
+}
+
+/* Log container */
+#log-container {
+    background-color: #FFFFFF;
+    border: 1px solid #333333;
+    padding: 24px;
+    font-size: 16px;
+    line-height: 1.5;
+}
+
+/* Modal/Overlay */
+.fixed.inset-0 {
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    backdrop-filter: none !important;
+}
+
+.fixed.inset-0 > div {
+    background-color: #FFFFFF !important;
+    border: 1px solid #333333 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    padding: 48px;
+    max-width: 600px;
+    margin: 48px auto;
+}
+
+/* Animations removal */
+.animate-fade-in, .animate-scale-in, .animate-spin, .animate-wave, .animate-pulse-slow, .processing-pulse {
+    animation: none !important;
+    transition: none !important;
+}
+
+/* Processing state without animation */
+.processing-pulse {
+    opacity: 0.7;
+}
+
+/* Disabled state */
+:disabled, .disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Hover states */
+button:hover, a:hover, [role="button"]:hover {
+    background-color: #333333;
+    color: #FFFFFF;
+}
+
+/* Active/Current states */
+.tab-btn.text-primary-400, .tab-btn.bg-primary-500\/10 {
+    background-color: #333333 !important;
+    color: #FFFFFF !important;
+}
+
+/* Status indicators */
+[id^="stat-"] {
+    border: 1px solid #333333;
+    padding: 24px;
+    background-color: #FFFFFF;
+    margin-bottom: 24px;
+}
+
+/* Grid layout spacing */
+.grid {
+    gap: 48px;
+}
+
+/* List items */
+li {
+    margin-bottom: 12px;
+    line-height: 1.5;
+}
+
+/* Headers */
+h1, h2, h3, h4, h5, h6 {
+    line-height: 1.2;
+    margin-bottom: 24px;
+    color: #333333;
+    font-weight: bold;
+}
+
+/* Details/Summary */
+details {
+    border: 1px solid #333333;
+    padding: 24px;
+    margin-bottom: 24px;
+    background-color: #FFFFFF;
+}
+
+summary {
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 1.5;
+    padding: 12px 0;
+}
+
+/* Audio element styling */
+audio {
+    width: 100%;
+    border: 1px solid #333333;
+    margin: 12px 0;
+}
+
+/* File input styling */
+input[type="file"] {
+    border: none;
+    padding: 12px 0;
+}
+
+/* Remove all !important shadow utilities */
+[class*="shadow-"] {
+    box-shadow: none !important;
+}
+
+/* Utility classes override */
+.backdrop-blur-md, .backdrop-blur-sm, [class*="backdrop-blur"] {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+
+/* Text alignment utilities preserved but colors neutralized */
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-left {
+    text-align: left;
+}
+
+/* Font utilities */
+.font-mono {
+    font-family: monospace;
+}
+
+.font-bold {
+    font-weight: bold;
+}
+
+.uppercase {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* Tracking/wider spacing */
+.tracking-wider {
+    letter-spacing: 2px;
+}
+
+/* Cursor utilities */
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.cursor-crosshair {
+    cursor: crosshair;
+}
+
+/* Display utilities - preserved */
+.hidden {
+    display: none !important;
+}
+
+.block {
+    display: block;
+}
+
+.flex {
+    display: flex;
+}
+
+.grid {
+    display: grid;
+}
+
+/* Overflow */
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.overflow-y-auto {
+    overflow-y: auto;
+}
+
+/* Position utilities preserved */
+.fixed {
+    position: fixed;
+}
+
+.relative {
+    position: relative;
+}
+
+.absolute {
     position: absolute;
-    inset: -2px;
-    border-radius: inherit;
-    background: linear-gradient(45deg, #6366f1, #f59e0b);
-    opacity: 0;
-    z-index: -1;
-    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-@keyframes pulse-ring {
-    0%, 100% { opacity: 0; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(1.02); }
+.inset-0 {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+/* Z-index preserved */
+.z-50, .z-40, .z-30 {
+    z-index: 100;
+}
+
+/* Width/Height utilities */
+.w-full {
+    width: 100%;
+}
+
+.h-full {
+    height: 100%;
+}
+
+.max-w-7xl {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Transform utilities */
+.transform {
+    transform: none !important;
+}
+
+.-translate-x-1\/2 {
+    transform: translateX(-50%);
+}
+
+/* Transition removal for minimalist feel */
+.transition-colors, .transition-all, .transition-transform, .duration-300, .duration-200 {
+    transition: none !important;
+}
+
+/* Hover state for interactive elements */
+button:hover, .tab-btn:hover, [role="button"]:hover, a:hover {
+    background-color: #333333;
+    color: #FFFFFF;
+    transition: none;
+}
+
+/* Custom element styling */
+app-navbar, app-sidebar, upload-zone, stat-card {
+    display: block;
+}
+
+/* Line height enforcement */
+.leading-relaxed {
+    line-height: 1.5;
+}
+
+.leading-tight {
+    line-height: 1.2;
+}
+
+/* Remove italic styling for cleaner look */
+.italic {
+    font-style: normal;
+}
+
+/* Whitespace handling */
+.whitespace-nowrap {
+    white-space: nowrap;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Flex utilities preserved */
+.flex-1 {
+    flex: 1;
+}
+
+.flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+/* Grid columns preserved */
+.grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+/* Col span utilities */
+.col-span-1 {
+    grid-column: span 1 / span 1;
+}
+
+.col-span-2 {
+    grid-column: span 2 / span 2;
+}
+
+.col-span-3 {
+    grid-column: span 3 / span 3;
+}
+
+/* Responsive preserved */
+@media (min-width: 768px) {
+    .md\:grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    
+    .md\:grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    
+    .md\:grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    
+    .md\:flex {
+        display: flex;
+    }
+    
+    .md\:block {
+        display: block;
+    }
+    
+    .md\:hidden {
+        display: none;
+    }
+    
+    .md\:col-span-2 {
+        grid-column: span 2 / span 2;
+    }
+}
+
+@media (min-width: 1024px) {
+    .lg\:grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    
+    .lg\:col-span-1 {
+        grid-column: span 1 / span 1;
+    }
+    
+    .lg\:col-span-2 {
+        grid-column: span 2 / span 2;
+    }
+    
+    .lg\:block {
+        display: block;
+    }
+}
+
+/* Height utilities */
+.h-16 {
+    height: 64px;
+}
+
+.h-32 {
+    height: 128px;
+}
+
+.h-48 {
+    height: 192px;
+}
+
+.h-64 {
+    height: 256px;
+}
+
+/* Specific component overrides */
+#btn-process {
+    background-color: #333333;
+    color: #FFFFFF;
+    border: 1px solid #333333;
+}
+
+#btn-process:hover {
+    background-color: #000000;
+    border-color: #000000;
+}
+
+#btn-clear {
+    background-color: #FFFFFF;
+    color: #333333;
+    border: 1px solid #333333;
+}
+
+#btn-clear:hover {
+    background-color: #333333;
+    color: #FFFFFF;
+}
+
+/* Tab active states */
+.tab-btn[class*="text-primary-400"], .tab-btn[class*="bg-primary-500"] {
+    background-color: #333333 !important;
+    color: #FFFFFF !important;
+    border-bottom: 2px solid #333333;
+}
+
+/* Checkbox states */
+input[type="checkbox"]:checked {
+    background-color: #333333;
+    border-color: #333333;
+}
+
+/* Range value displays */
+span[id^="val-"] {
+    font-family: monospace;
+    font-size: 16px;
+    color: #333333;
+    min-width: 48px;
+    display: inline-block;
+    text-align: right;
+}
+
+/* File queue status */
+#file-queue p {
+    padding: 48px 24px;
+    text-align: center;
+    border: 1px dashed #333333;
+    background-color: #FFFFFF;
+}
+
+/* Block preview container */
+#blocks-preview {
+    border: 1px solid #333333;
+    padding: 24px;
+    background-color: #FFFFFF;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+/* Log entry specific */
+.log-entry span:first-child {
+    color: #666666;
+    margin-right: 12px;
+}
+
+/* Preview waveform text */
+#waveform + div {
+    font-family: monospace;
+    font-size: 14px;
+    color: #333333;
+    margin-top: 12px;
+}
+
+/* Tips/Help card */
+[class*="bg-secondary-900"], [class*="bg-primary-900"], [class*="from-slate-800"] {
+    background-color: #FFFFFF !important;
+    border: 1px solid #333333 !important;
+    padding: 24px;
+    margin-bottom: 24px;
+}
+
+/* Color override for specific text classes */
+[class*="text-primary-300"], [class*="text-secondary-400"], [class*="text-emerald-400"], [class*="text-slate-"] {
+    color: #333333 !important;
+}
+
+/* Status dots */
+[class*="bg-primary-500"], [class*="bg-secondary-500"], [class*="bg-emerald-500"] {
+    background-color: #333333 !important;
+}
+
+/* Remove gradient text utilities */
+.bg-clip-text, .text-transparent, [class*="bg-gradient-to-"] {
+    background: none !important;
+    -webkit-background-clip: unset !important;
+    color: #333333 !important;
+}
+
+/* Border color utilities override */
+.border-slate-600, .border-slate-700, .border-slate-800 {
+    border-color: #333333 !important;
+}
+
+/* Specific stat card colors */
+stat-card [class*="text-primary-400"], stat-card [class*="text-secondary-400"] {
+    color: #333333 !important;
+}
+
+stat-card [class*="bg-primary-500"], stat-card [class*="bg-secondary-500"] {
+    background-color: #F5F5F5 !important;
+    border: 1px solid #333333;
+}
+
+/* Upload zone icon colors */
+upload-zone [class*="text-primary-400"], upload-zone [class*="text-slate-400"] {
+    color: #333333 !important;
+}
+
+/* Sidebar navigation */
+app-sidebar a {
+    display: block;
+    padding: 12px 16px;
+    border-bottom: 1px solid #333333;
+    text-decoration: none;
+}
+
+app-sidebar a:last-child {
+    border-bottom: none;
+}
+
+/* Mobile specific adjustments */
+@media (max-width: 768px) {
+    .p-4, .px-4, .py-4 {
+        padding: 16px !important;
+    }
+    
+    .p-6, .px-6, .py-6 {
+        padding: 16px !important;
+    }
+    
+    main {
+        padding: 24px 16px;
+    }
+    
+    .grid {
+        gap: 24px;
+    }
+    
+    .space-y-6 > * + * {
+        margin-top: 24px !important;
+    }
 }