style.css

/* Custom Scrollbar - Minimalist */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 0;
}

/* Range Slider - Minimalist */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-track {
    background: #333333;
    height: 4px;
    border-radius: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #333333;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -6px;
    box-shadow: none;
    transition: none;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: none;
    box-shadow: none;
    background: #000000;
}

input[type="range"]::-moz-range-track {
    background: #333333;
    height: 4px;
    border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
    background: #333333;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
    box-shadow: none;
}

/* Waveform Canvas */
#waveform {
    image-rendering: pixelated;
    cursor: crosshair;
    background: #FFFFFF;
}

/* Tab Transitions - Functional Only */
.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tab-content:not(.hidden) {
    display: block;
    opacity: 1;
}

/* Block Preview Items */
.block-item {
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Log Entries */
.log-entry {
    border-left: 2px solid #333333;
    padding-left: 16px;
    margin-bottom: 12px;
    line-height: 1.5;
}

.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) {
    body {
        font-size: 16px;
    }
}

/* Custom Checkbox */
input[type="checkbox"] {
    accent-color: #333333;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Drag over state - Functional */
.drag-over {
    border: 2px dashed #333333 !important;
    background: #FFFFFF !important;
}

/* 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;
}

/* 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-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;
    }
}