@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #F9FAFB;
        }

        .waveform {
            background: linear-gradient(90deg, #4F46E5 0%, #10B981 100%);
        }

        .custom-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 16px;
            width: 16px;
            background: #4F46E5;
            cursor: pointer;
            border-radius: 50%;
        }

        .tab-active {
            border-bottom: 3px solid #4F46E5;
            color: #4F46E5;
            font-weight: 600;
        }

        /* Simple waveform visualization */
        .wave-container {
            height: 100px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .wave {
            position: absolute;
            height: 100%;
            width: 100%;
            background: repeating-linear-gradient(90deg,
                    transparent,
                    transparent 2px,
                    rgba(79, 70, 229, 0.2) 2px,
                    rgba(79, 70, 229, 0.2) 4px);
            animation: wave 1.5s linear infinite;
        }

        @keyframes wave {
            0% {
                background-position-x: 0;
            }

            100% {
                background-position-x: 100%;
            }
        }

        /* Animation for recording */
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }

        .recording {
            animation: pulse 1.5s infinite;
        }

        /* Drag and drop styles */
        .dropzone {
            border: 2px dashed #D1D5DB;
            transition: all 0.3s ease;
        }

        .dropzone-active {
            border-color: #4F46E5;
            background-color: rgba(79, 70, 229, 0.05);
        }

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

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

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Parameter control styles */
        .param-control {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .param-control label {
            width: 120px;
            font-size: 14px;
            color: #4a5568;
        }

        .param-control input[type="range"] {
            flex-grow: 1;
            margin: 0 10px;
        }

        .param-control .value-display {
            width: 40px;
            text-align: center;
            font-size: 14px;
            color: #4a5568;
        }

        .param-control .value-buttons {
            display: flex;
            flex-direction: column;
        }

        .param-control .value-buttons button {
            background: #e2e8f0;
            border: none;
            width: 20px;
            height: 15px;
            line-height: 15px;
            padding: 0;
            cursor: pointer;
            font-size: 10px;
        }

        .param-control .value-buttons button:first-child {
            border-radius: 3px 3px 0 0;
        }

        .param-control .value-buttons button:last-child {
            border-radius: 0 0 3px 3px;
        }

        /* Effect box styles */
        .effect-box {
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 15px;
            background: #f8fafc;
        }

        .effect-box h4 {
            margin-top: 0;
            margin-bottom: 10px;
            font-size: 14px;
            color: #4a5568;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .effect-box h4 button {
            background: none;
            border: none;
            color: #e53e3e;
            cursor: pointer;
            font-size: 12px;
        }