.target{
        transition: all 0.3s ease;
    }
    
    .target:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
        }
        
    .voice_style{
         background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
            color: white;
    }   
    
    .tx-gra{
        color: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
    }
    
    
     .line-box {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
        margin-bottom: 15px;
        transition: all 0.3s ease;
        border-left: 4px solid #667eea;
    }

    .line-box:hover {
        transform: translateX(5px);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
    }
    
    
     body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .order-card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            margin-bottom: 1rem;
        }
        
        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .card-header-custom {
            background: white;
            border: none;
            cursor: pointer;
            padding: 1.5rem;
            border-radius: 1rem 1rem 0 0;
        }
        
        .expand-button {
            width: 40px;
            height: 40px;
            background-color: #f8f9fa;
            border: none;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .expand-button:hover {
            background-color: #e9ecef;
        }
        
        .expand-button.rotated {
            transform: rotate(45deg);
        }
        
        .collapse-content {
            transition: all 0.4s ease;
        }
        
        .status-badge {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
            border-radius: 50px;
            font-weight: 500;
        }
        
        .status-completed {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
        }
        
        .status-processing {
            background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
            color: white;
        }
        
        .status-pending {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            color: white;
        }
        
        .text-block {
            background-color: #f8f9fa;
            border-radius: 0.75rem;
            padding: 1rem;
            border-left: 4px solid #007bff;
        }
        
        .text-block.orange {
            border-left-color: #fd7e14;
        }
        
        .text-block.gray {
            border-left-color: #6c757d;
        }
        
        
      
       
        
        .download-button {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            border-radius: 0.5rem;
            color: white;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease;
        }
        
        .download-button:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
        }
        
        .progress-custom {
            height: 8px;
            border-radius: 4px;
            background-color: #e9ecef;
        }
        
        .progress-bar-custom {
            background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        .progress-orange {
            background: linear-gradient(90deg, #fd7e14 0%, #e8590c 100%);
        }
        
        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.875rem;
        }
        
        .avatar-blue {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        }
        
        .avatar-green {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }
        
        .avatar-gray {
            background-color: #dee2e6;
            color: #6c757d;
        }
        
        .action-button {
            border: 1px solid #dee2e6;
            background: white;
            color: #6c757d;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease;
        }
        
        .action-button:hover {
            background-color: #f8f9fa;
            color: #495057;
        }
        
        .status-info {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 0.75rem;
            padding: 1rem;
        }
        
        .status-waiting {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.75rem;
            padding: 1rem;
        }
        
        @media (max-width: 768px) {
            .card-header-mobile {
                flex-direction: column;
                align-items: flex-start !important;
            }
            
            .expand-button {
                position: absolute;
                top: 1rem;
                right: 1rem;
            }
            
            .date-mobile {
                margin-top: 0.5rem;
            }
        }